/* =================================================================
   TOKENS — shared design variables + global reset.
   Loaded before any other stylesheet by index.html.
   Variables here are used by BOTH the intro and the site, so any
   colour / motion / dimension change ripples to the whole product.
   ================================================================= */

:root {
  /* Palette — base (kept stable for intro / legacy) */
  --bg:      #0a0a0b;
  --ink:     #f5f1ea;
  --accent:  #d4a373;

  /* ── Expanded palette (post-intro homepage) ────────────────────
     A single visual language. Surfaces step up subtly warmer; amber
     has gradations for shadows / highlights / depth; ink has tiers
     so body / supporting / muted text have real hierarchy without
     dropping to pure white-on-black. */

  --surface-0:  #0a0a0b;        /* page bg                          */
  --surface-1:  #121013;        /* lifted panels                    */
  --surface-2:  #1a161b;        /* cards / live-glass               */
  --surface-3:  #221c22;        /* hover / active                   */

  --amber-50:   #f3dcc1;        /* highlights, gloss                */
  --amber-100:  #e8c39e;        /* gradient top                     */
  --amber-300:  #d4a373;        /* the brand                        */
  --amber-500:  #ad7b48;        /* depth                            */
  --amber-700:  #5a3a1f;        /* deepest ember                    */

  --ink-100:    #f5f1ea;        /* display + headings               */
  --ink-80:     #d4cec0;        /* body                             */
  --ink-60:     #9a948a;        /* supporting                       */
  --ink-40:     #65615a;        /* meta / captions                  */
  --ink-20:     #3a3833;        /* dividers                         */

  --line-soft:  rgba(245, 241, 234, 0.06);
  --line-mid:   rgba(245, 241, 234, 0.12);
  --line-amber: rgba(212, 163, 115, 0.18);

  /* Glass tints */
  --glass-warm:    rgba(58, 42, 24, 0.40);
  --glass-deep:    rgba(24, 18, 12, 0.18);
  --glass-card:    rgba(20, 16, 18, 0.55);

  /* Container + rhythm */
  --content-w:  1280px;
  --gutter:     clamp(20px, 4vw, 56px);
  --section-y:  clamp(96px, 14vh, 180px);

  /* Video aspect ratio. JS overwrites this with the actual
     videoWidth/videoHeight when the intro video loads. The frame
     width below + the logo overlay both derive from this single
     number — layout matches the video pixels on every device. */
  --video-ar: 1.7777778;

  /* Single source-of-truth width formula. The video frame and the
     persistent logo overlay both use this. The 3rd term keeps the
     frame from overflowing vertically on short screens. */
  --frame-w: min(90vw, 1000px, calc(78vh * var(--video-ar)));

  /* Logo overlay tuning — three numbers control where the DOM logo
     lands relative to the video's logo. Because the overlay is the
     EXACT pixel-size of the video on every device, these percentages
     describe the logo's position inside the video itself. Tune once
     via ?cal=1, works everywhere. */
  --logo-size: 60%;        /* width of the logo, as % of frame width  */
  --logo-x:    0%;         /* horizontal offset from centre, % of W   */
  --logo-y:    0%;         /* vertical offset from centre,   % of H   */

  /* Start-button circle dimensions. Used by both the button itself
     AND the intro-flare animation, so the line the flare traces
     lands pixel-perfect on the button's border. */
  --circle-d: 104px;
  --circle-r: 52px;

  /* Motion easings — shared so the intro and the site read as one
     coherent product. */
  --ease-flow: cubic-bezier(0.2, 0.85, 0.2, 1);
  --ease-expo: cubic-bezier(0.65, 0, 0.05, 1);
}

@media (max-width: 768px) {
  :root {
    --circle-d: 88px;
    --circle-r: 44px;
  }
}

/* Global reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base typography. Intro adds overflow: hidden on top of this; the
   site removes that lock once the homepage is revealed.

   Onest is the primary because Geist ships no Cyrillic — falling
   back to system fonts mid-sentence looked uneven on Bulgarian text.
   Onest is the closest geometric grotesque with full Cyrillic. Geist
   stays in the stack as a fallback for the intro's brand-mark. */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}