/* ============================================================
   Language Elevator — design tokens
   Site side: selfmadewebdesigner.com language
   App side: the reference iOS app language (from screen recording)
   Everything themable lives here — no hardcoded values below.
   ============================================================ */
:root {
  /* ---------- site palette ---------- */
  --paper:        #E0E0E0;   /* page background */
  --paper-line:   rgba(23, 28, 24, 0.07); /* grid lines */
  --ink:          #171C18;   /* near-black text / borders */
  --ink-soft:     #4E524F;
  --card:         #EBEBE8;
  --yellow:       #FFE500;   /* CTA accent */
  --white:        #FFFFFF;

  /* ---------- app palette (sampled from recording) ---------- */
  --app-bg:         #0A0A0A;
  --app-surface:    #141414;  /* caption panel */
  --app-band:       #1B1B1B;  /* active sentence band */
  --app-card:       #1D1D1D;
  --app-chip:       #2A2A2A;
  --app-orange:     #E96A2D;  /* highlight pill, accents */
  --app-orange-hot: #F2841C;  /* tab bar active, energy */
  --app-text:       #FFFFFF;
  --app-text-dim:   #9A9A9A;  /* translations */
  --app-text-faint: #5C5C5C;  /* inactive sentences, translit */
  --app-text-ghost: #3E3E3E;  /* inactive translations */
  --ul-teal:        #3E8FA3;  /* word underline: new/saved */
  --ul-red:         #C25B5B;  /* word underline: tricky */

  /* Per-tab accents. Each tab lights up in its own hue, which is a faster
     "you are here" than reading an icon. Picked far enough apart to tell
     at a glance, and light enough to glow against the near-black bar. */
  --tab-videos:     #F2841C;  /* home keeps the brand orange */
  --tab-player:     #FF5C8A;
  --tab-vocab:      #3ED6C0;
  --tab-settings:   #6AA9FF;

  /* ---------- typography ---------- */
  /* display: PP Right Grotesk Compact stand-in */
  --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  /* mono: Aeonik Fono stand-in */
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* app: SF Rounded on iOS, Nunito elsewhere */
  --font-app: ui-rounded, 'Nunito', -apple-system, 'Segoe UI', sans-serif;

  /* ---------- type scale ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-hero: clamp(3.4rem, 11.5vw, 9.5rem);
  --text-h2:   clamp(2.2rem, 6vw, 4.5rem);

  /* app type scale */
  --app-text-caption:  1.06rem;  /* subtitle sentence */
  --app-text-translit: 0.66rem;  /* phonetic row */
  --app-text-trans:    0.92rem;  /* translation row */

  /* The reader's own size dial (Settings → Caption size), applied where
     these three are USED rather than baked into them: the tablet tier and
     the dense-script tier both rewrite the values above, and a scale
     folded into the numbers here would be overwritten by both. One
     multiplier over the top scales whatever those tiers resolve to.
     player.js writes it; 1 is the size everyone had before the dial. */
  --cap-scale: 1;

  /* interlinear word layers, relative to the source word:
     meaning (gloss) reads at ~78%, phonetics is a hint at ~58% */
  --cap-ph-size:    0.58em;
  --cap-gloss-size: 0.78em;
  --app-text-ui:       0.80rem;

  /* ---------- spacing / radius / borders ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 1rem;
  --sp-4: 1.5rem;   --sp-5: 2.5rem;  --sp-6: 4rem;  --sp-7: 6.5rem;
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-pill: 100px;
  --border-ink: 2px solid var(--ink);

  /* ---------- app frame ----------
     The app is a portrait tablet at most. Phones and tablets get it
     full-bleed; desktop frames it at exactly that ceiling, so the layout
     never has to answer "what does this look like 1600px wide?".
     iPad 10.9" portrait = 820 x 1180 CSS px. */
  --app-max-w:  820px;
  --app-max-h: 1180px;
  --app-vh:     88vh;       /* height the desktop frame aims for */
  --bezel-pad:  12px;
  --bezel-r:    54px;
  --screen-r:   44px;
  /* NOTE: media queries can't read custom properties — the breakpoints in
     site.css are hard-coded to match --app-tier-w and --app-max-w. */

  /* ---------- app control sizes (phone tier) ----------
     Stepped, not fluid: the app has exactly two looks, phone and tablet.
     Everything below is overridden wholesale in the tablet tier. */
  --ctl-icon:     22px;   /* transport chevrons */
  --ctl-play:     38px;   /* play / pause */
  --tab-icon:     24px;   /* bottom bar */
  --tap-min:      44px;   /* Apple HIG minimum touch target */
  --scrub-thumb:  14px;
  --scrub-rail:    5px;
  --scrub-hit:    22px;
  --fade-h:       56px;   /* caption fade above the transport */

  /* letter spacing */
  --track-tight: -0.04em;   /* display headlines */
  --track-mono:  0.02em;
  --track-app:   0.06em;    /* app rounded text is airy */
}

/* Scripts with heavy per-glyph detail — katakana, Devanagari, Hanzi — go
   illegible at sizes that read fine in Latin or Cyrillic. Keyed off the
   LEARNER's language (set by player.js), not the source track: these are
   the layers written in the learner's script. */
:root[data-script="dense"] {
  --cap-ph-size:    0.70em;
  --cap-gloss-size: 0.86em;
}

/* ============================================================
   TABLET TIER — switches on the APP's width, not the viewport, so a
   820px app framed inside a 1600px desktop still reads as a tablet.
   Container queries are the only way to get that right; a media query
   would call it "desktop" and size the app for a screen it never has.
   ============================================================ */
@container app (min-width: 768px) {
  .app {
    /* type steps up ~1.35x */
    --app-text-caption:  1.32rem;
    --app-text-trans:    1.14rem;
    --app-text-translit: 0.80rem;
    --app-text-ui:       1.05rem;

    /* spacing / radius step up ~1.4x */
    --sp-1: 0.35rem;  --sp-2: 0.7rem;   --sp-3: 1.4rem;
    --sp-4: 2.1rem;   --sp-5: 3.5rem;   --sp-6: 5.6rem;  --sp-7: 9rem;
    --r-sm: 14px;  --r-md: 22px;  --r-lg: 34px;

    /* controls step up */
    --ctl-icon:     30px;
    --ctl-play:     52px;
    --tab-icon:     32px;
    --tap-min:      52px;
    --scrub-thumb:  18px;
    --scrub-rail:    7px;
    --scrub-hit:    28px;
    --fade-h:       72px;
  }
}