/* =============================================================
   tokens.css — Design tokens (single source of truth)
   Block 3. Values transcribed from the FINAL handoff, which is
   itself transcribed from the reference build:
   design-handoff-FINAL/delya-labdoun-EXACT-OUTPUT.html
   (all styling there is inline — these tokens mirror it exactly).

   RULE: no hardcoded colors or font sizes anywhere else in the
   codebase — reference these custom properties only.
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     Color  (navy is reserved for active / accent states only)
     --------------------------------------------------------- */
  --color-white:          #FFFFFF; /* page background — must stay ≥60% of every screen */
  --color-surface:        #F5F5F5; /* off-white fills, reserved image area, thank-you card */
  --color-divider:        #E8E8E8; /* hairline borders, progress track, section rules */
  --color-text-secondary: #9E9E9E; /* eyebrows, meta, problem note, durations, captions */
  --color-text-body:      #3D3D3D; /* body paragraphs, default nav links */
  --color-ink:            #111111; /* headers, name, play-button icon, active labels' rest */
  --color-navy:           #1B2B4B; /* ACTIVE only: play fill, progress fill, links, accents */
  --color-accent:         var(--color-navy); /* alias — keep for components that read "accent" */

  /* ---------------------------------------------------------
     Typography — families  (only TWO families, per EXACT output)
     --------------------------------------------------------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;          /* headers only */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* body + all UI */

  /* ---------------------------------------------------------
     Typography — weights
     --------------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------
     Typography — size scale
     --------------------------------------------------------- */
  --text-hero:         clamp(44px, 8vw, 104px); /* hero name (Playfair 700) */
  --text-h2:           clamp(30px, 5vw, 52px);  /* About / Contact page H2 (Playfair 500) */
  --text-track-title:  clamp(34px, 5vw, 46px);  /* track title (Playfair 600) */
  --text-body:         17px;                     /* About body, Contact paragraph */
  --text-meta:         17px;                     /* track meta line (navy 500) */
  --text-about-sub:    22px;                     /* About sub-line (Playfair 500 navy) */
  --text-thanks:       24px;                     /* Contact "Thank you." (Playfair) */
  --text-thanks-sub:   20px;                     /* Contact "Talk soon, Délya" (Playfair navy) */
  --text-problem:      15px;                     /* problem note */
  --text-hero-eyebrow: 13px;                     /* hero eyebrow */
  --text-eyebrow:      12px;                     /* About / Contact eyebrows, field labels */
  --text-nav-name:     22px;                     /* nav wordmark (Playfair 700) */
  --text-nav-link:     14px;                     /* nav links */
  --text-player-label: 16px;                     /* player track label (Inter 600) */
  --text-elapsed:      12px;                     /* player elapsed / remaining */
  --text-field-input:  18px;                     /* form input text */
  --text-footer-name:  16px;                     /* footer name */
  --text-footer-year:  13px;                     /* footer year */
  --text-button:       14px;                     /* Send button */

  /* ---------------------------------------------------------
     Typography — line-height
     --------------------------------------------------------- */
  --lh-hero:    0.98;
  --lh-h2:      1.15;
  --lh-title:   1.05;
  --lh-body:    1.7;
  --lh-problem: 1.7;

  /* ---------------------------------------------------------
     Typography — letter-spacing
     --------------------------------------------------------- */
  --ls-hero:     -0.015em;
  --ls-nav-name: -0.01em;
  --ls-eyebrow:   0.22em;
  --ls-label:     0.14em;
  --ls-button:    0.08em;

  /* ---------------------------------------------------------
     Layout & spacing
     --------------------------------------------------------- */
  --nav-height:        56px;
  --nav-padding-x:     clamp(24px, 5vw, 56px);  /* nav side padding */
  --content-padding-x: clamp(24px, 5vw, 72px);  /* home track column + footer side inset */
  --content-inset:     clamp(48px, 10vw, 144px);/* = 2 × content-padding-x (footer width) */
  --hero-padding-x:    clamp(24px, 6vw, 80px);
  --hero-gap:          clamp(20px, 4vw, 64px);

  --section-rhythm:    22vh;                     /* footer sits 22vh below last section */
  --track-pad-first:   18vh;                     /* padding-top of first track */
  --track-pad:         24vh;                     /* padding-top of later tracks */
  --col-gap:           clamp(56px, 9vw, 160px);  /* track 2-column gap */

  --content-wide:      1240px;                   /* home (2-column track layout) */
  --content-about:     880px;                    /* about column */
  --content-narrow:    620px;                    /* contact column */

  --frame-height:      380px;                    /* reserved illustration area (placeholder) */

  /* ---------------------------------------------------------
     Components
     --------------------------------------------------------- */
  --play-size:       48px;                       /* play button circle */
  --progress-height: 4px;                        /* progress bar track */
  --border-hairline: 1px solid var(--color-divider);

  /* ---------------------------------------------------------
     Motion
     --------------------------------------------------------- */
  --ease-reveal:  cubic-bezier(.2, .7, .2, 1);
  --dur-reveal:   0.7s;   /* text-column reveal */
  --dur-illo:     0.8s;   /* illustration reveal */
  --delay-illo:   0.18s;  /* illustration reveal delay */
  --reveal-shift: 26px;   /* slide-up distance on reveal */
  --dur-nav:      0.25s;
  --dur-color:    0.25s;
  --stagger-step: 0.11s;  /* per-element stagger within a section */
}