/**
 * Hiroi Slides — Flagship Design Tokens (Wave-3)
 * ----------------------------------------------------------------------------
 * SCOPED override layer for Slides pages ONLY.
 *
 * This file is loaded AFTER the shared `design-tokens.css` on the Slides
 * templates (slides/base.html, slides/editor.html). Because it redeclares the
 * same `:root` custom properties later in the cascade, it refines the flagship
 * system for Slides surfaces without touching the parent app — the shared
 * `design-tokens.css` is intentionally left unedited.
 *
 * Refinements (per SLIDES_DESIGN_DIRECTION.md §2 "Refined tokens"):
 *   1. Warm-neutral OKLCH-derived ramp + restored true --color-text-tertiary
 *   2. Warm-tinted key+ambient shadow ladder (rgb(28 22 16))
 *   3. Display type tokens (5xl/6xl/7xl) + --tracking-display + 3xl→36px
 *   4. .hs-tnum tabular-nums utility
 *   5. Radius refinement (--radius-sm → 6px)
 *   6. Warmer status hues (success #0e9f6e, info #3060c0)
 *   7. One canonical dark-mode ramp shared by [data-theme=dark] + media query
 *
 * The existing --ease-* / --duration-* motion curves are deliberately NOT
 * redeclared here, so they inherit unchanged from design-tokens.css.
 */

:root {
  /* ============================================================
   * 1. Warm-neutral ramp — OKLCH-derived, even L steps.
   *    Any two stops ≥5 steps apart clear AA 4.5:1.
   * ============================================================ */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #faf9f7;
  --color-neutral-100: #f4f2ef;
  --color-neutral-150: #ece9e4;
  --color-neutral-200: #e2ded8;
  --color-neutral-300: #d0cbc5;
  --color-neutral-400: #b0a9a1;
  --color-neutral-500: #8a8278;
  --color-neutral-600: #6b645c;
  --color-neutral-700: #5c5650;
  --color-neutral-900: #1a1816;

  /* Surfaces & backgrounds repointed onto the refined ramp */
  --color-background:           var(--color-neutral-50);
  --color-background-secondary: var(--color-neutral-100);
  --color-background-tertiary:  var(--color-neutral-150);
  --color-surface:              var(--color-neutral-0);
  --color-surface-hover:        var(--color-neutral-100);

  /* Text — restore a TRUE tertiary tier (the shared #5e5852 collapsed
     secondary/tertiary into one illusory tier).
     TERTIARY is consumed as NORMAL-WEIGHT small text (.hs-insp-hint,
     .hs-save-status, .hs-voice-clone-sub, .hs-clone-prompt, .hs-rec-hint,
     .hs-stage-counter, .hs-dropzone-hint, landing .hs-mock-label/.hs-plan-meta,
     etc.). The prior #7a746d measured 4.62:1 on --color-surface #fff but only
     4.39:1 on --color-background #faf9f7, 4.13:1 on --color-background-secondary
     #f4f2ef (where .hs-rec-hint actually sits, inside .hs-recorder) — under AA.
     #746e67 = 5.04:1 (#fff) / 4.79:1 (#faf9f7) / 4.51:1 (#f4f2ef) — the MINIMAL
     darkening that clears AA on the lightest real text surface (bg-secondary),
     while staying visibly distinct from --color-text-secondary #5c5650
     (~1.6:1 between the two tiers, no collapse). */
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary:  #746e67;
  --color-text-disabled:  var(--color-neutral-500);

  /* Borders repointed onto the ramp */
  --color-border:       var(--color-neutral-200);
  --color-border-hover: var(--color-neutral-300);

  /* ============================================================
   * 6. Warmer status hues (keep the teal brand untouched).
   * ============================================================ */
  --color-success: #0e9f6e;
  --color-info:    #3060c0;

  /* Status TEXT ink, AA-locked on the ACTUAL tinted status surfaces.
     ------------------------------------------------------------------
     ERROR: the shared light --color-error-text (#dc2626) measures only
     4.41:1 on the opaque pink error-bg (#fef2f2) — under AA for the
     normal-weight error notes (deck-status is-error, checkout-error, modal
     alert). Darken to #b91c1c → 5.91:1 (AA). NOTE: because this :root sits
     LATER in source order than the shared [data-theme=dark] block (and shares
     its specificity), this #b91c1c would shadow the shared dark #f87171 in
     dark mode — so BOTH dark blocks below explicitly re-declare
     --color-error-text:#f87171 (5.88:1 on the translucent red-over-dark
     surface). Consumers reference var(--color-error-text).

     INFO: consumed AS TEXT by the studio 'Generating' pill LABEL. The pill
     decouples its 6px status-dot (graphical, keeps the vivid shared
     --color-info #3b82f6 — 3.38:1 on info-bg, clears the 3:1 non-text
     threshold) from its NORMAL-WEIGHT label text, which must clear AA 4.5:1.
     The raw shared --color-info #3b82f6 measures only 3.38:1 as TEXT on the
     opaque info-bg (#eff6ff) — FAIL. --color-info-text #2563eb = 4.75:1 on
     #eff6ff (AA). The dark blocks below restate --color-info-text because the
     translucent dark info-bg composites differently — see below. */
  --color-error-text: #b91c1c;
  --color-info-text:  #2563eb;

  /* Foreground ink for WARN text/pills (editor duration WARN, thumbnail warn
     badge foreground, voice cloned-voice status badge, pricing/studio warn).
     On the LIGHT warn surface (--color-warning-bg #fffbeb) this dark amber
     clears AA at 4.84:1. The dark blocks below brighten it to a light amber
     that clears AA on the translucent-amber-over-dark surfaces (>=9:1). White
     text ON a SOLID warning fill stays #fff — it is not this token. */
  --color-warning-text: #b45309;

  /* ------------------------------------------------------------
   * Ink that sits ON the primary teal fill (buttons, the rewrite
   * pill, cost tags). On the LIGHT teal (--color-primary #0f766e)
   * white clears AA comfortably. In dark mode the shared layer
   * swaps --color-primary to a BRIGHT teal (#2dd4bf) where white
   * text fails contrast — the dark blocks below repoint this token
   * to a dark ink so the on-teal label never washes out. Every
   * on-teal control references var(--color-on-primary) instead of
   * a hard-coded #fff.
   * ------------------------------------------------------------ */
  --color-on-primary: #ffffff;

  /* ============================================================
   * 2. Warm-tinted key + ambient shadow ladder.
   *    Tinted toward rgb(28 22 16) (warm near-black), not pure black,
   *    so elevation reads warm. Structure uses hairline borders, not
   *    these — reserve for floating (md) and modal (xl) surfaces.
   * ============================================================ */
  --shadow-xs: 0 1px 2px rgb(28 22 16 / 0.04);
  --shadow-sm: 0 1px 2px rgb(28 22 16 / 0.06), 0 1px 1px rgb(28 22 16 / 0.04);
  --shadow-md: 0 2px 4px rgb(28 22 16 / 0.05), 0 4px 8px -1px rgb(28 22 16 / 0.07);
  --shadow-lg: 0 4px 8px -2px rgb(28 22 16 / 0.06), 0 12px 20px -4px rgb(28 22 16 / 0.10);
  --shadow-xl: 0 8px 16px -4px rgb(28 22 16 / 0.07), 0 24px 40px -8px rgb(28 22 16 / 0.14);
  --shadow-2xl: 0 8px 16px -4px rgb(28 22 16 / 0.08), 0 25px 50px -12px rgb(28 22 16 / 0.14);
  --shadow-card: 0 0 0 1px rgb(28 22 16 / 0.04), 0 1px 2px rgb(28 22 16 / 0.04);
  --shadow-card-hover: 0 0 0 1px rgb(28 22 16 / 0.04), 0 3px 8px -2px rgb(28 22 16 / 0.07);

  /* ============================================================
   * 3. Display type tokens.
   *    New large display steps for the marketing hero / deck headlines,
   *    a dedicated display tracking, and a corrected 3xl (34 → 36px).
   * ============================================================ */
  --font-size-3xl: 2.25rem;   /* 36px — bumped from 34px */
  --font-size-5xl: 3.75rem;   /* 60px */
  --font-size-6xl: 4.5rem;    /* 72px */
  --font-size-7xl: 5.5rem;    /* 88px */

  --tracking-display: -0.03em;

  /* ============================================================
   * 5. Radius refinement.
   *    Widen the sm step to 6px (inputs / buttons / nav). Other roles
   *    (xs chips, lg cards, xl editor, full pills) inherit unchanged.
   * ============================================================ */
  --radius-sm: 0.375rem;   /* 6px — widened from 8px */
}

/* ============================================================
 * 4. Tabular-figures utility.
 *    Apply to any number that aligns or ticks (rail index, durations,
 *    render %, gallery meta) so columns of digits stay in lockstep.
 * ============================================================ */
.hs-tnum {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
 * 7. Dark mode — ONE canonical warm ramp.
 *
 * The shared file forked text-primary/tertiary between [data-theme=dark]
 * and the system-preference media query. Here a single declaration block
 * is referenced from BOTH selectors so the two paths can never drift.
 * Elevation is carried by lightness + a faint top inner-highlight; shadows
 * stay barely-there.
 * ============================================================ */
[data-theme="dark"],
:root[data-theme="dark"] {
  /* Backgrounds — warm dark, even lightness steps */
  --color-background:           #0e0d0c;
  --color-background-secondary: #171514;
  --color-background-tertiary:  #211f1d;
  --color-surface:              #1c1a18;
  --color-surface-hover:        #262422;

  /* Text — warm off-whites, true secondary/tertiary separation.
     TERTIARY-as-text: the prior #847d76 measured 4.28:1 on --color-surface
     #1c1a18 and 4.49:1 on --color-background-secondary #171514 (where dark
     .hs-rec-hint sits) — under AA for normal-weight hints. #88817a = 4.52:1
     (#1c1a18) / 4.74:1 (#171514) / 4.79:1 (#0e0d0c) — the MINIMAL lightening
     that clears AA on those real surfaces while staying clearly distinct from
     --color-text-secondary #a8a29e (no tier collapse). */
  --color-text-primary:   #f5f2ed;
  --color-text-secondary: #a8a29e;
  --color-text-tertiary:  #88817a;
  --color-text-disabled:  #52504e;
  --color-text-inverse:   #0e0d0c;

  /* Borders */
  --color-border:        #302c28;
  --color-border-hover:  #423d38;
  --color-border-focus:  #2dd4bf;

  /* Raw neutral stops consumed directly by editor.css / studio.css — must be
     redeclared in dark so direct consumers don't keep LIGHT values. */
  --color-neutral-0:   #1c1a18;
  --color-neutral-200: #302c28;
  --color-neutral-900: #f5f2ed;

  /* Warmer status hues, lightened for dark surfaces */
  --color-success:      #0e9f6e;
  --color-success-text: #34d399;
  /* ERROR-as-text MUST be restored to the bright dark red HERE. The slides
     :root sets --color-error-text:#b91c1c for light; because :root and
     [data-theme=dark] share specificity, that later-in-source :root value
     SHADOWS the shared dark [data-theme=dark] #f87171 unless this dark block
     re-declares it (cycle 5 removed this line trusting the shared cascade and
     dark checkout/alert/error-pill text fell to 2.51:1 on the translucent
     red-over-surface). #b91c1c = 2.51:1 (FAIL); #f87171 = 5.88:1 on
     err-bg/surface and 6.59:1 on err-bg/background — AA restored. */
  --color-error-text:   #f87171;
  /* INFO: --color-info stays the vivid blue used by the 6px status DOT
     (graphical: #3b82f6 → 4.37:1 on the translucent info-bg over dark surface,
     clears the 3:1 non-text threshold). --color-info-text is the 'Generating'
     pill LABEL ink. The prior #5a82e0 measured 4.36:1 on the translucent blue
     info-bg (rgba(37 99 235/.1)) composited over the dark surface — under AA.
     #7da3ef → 6.39:1 on surface / 6.70:1 on bg-secondary / 7.21:1 on
     background (AA, normal weight). */
  --color-info:         #3b82f6;
  --color-info-text:    #7da3ef;

  /* Brightened amber WARN ink for dark surfaces — clears AA (>=9:1) on the
     translucent-amber warn-bg over the dark surface/secondary panels. */
  --color-warning-text: #fbbf24;

  /* On-teal ink → dark. The shared dark layer brightens --color-primary to
     #2dd4bf; white text on it fails AA, so on-teal labels use a near-black
     warm ink (clears AA on bright teal AND on --color-primary-hover #14b8a6). */
  --color-on-primary:   #04110f;

  /* Shadows — rely on borders; faint top inner-highlight for elevation */
  --shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-sm: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-md: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 2px 4px rgb(0 0 0 / 0.45);
  --shadow-lg: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 8px 16px -4px rgb(0 0 0 / 0.5);
  --shadow-xl: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 40px -8px rgb(0 0 0 / 0.55);
  --shadow-2xl: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 48px -12px rgb(0 0 0 / 0.55);
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.05);
  --shadow-card-hover: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 8px -2px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds */
    --color-background:           #0e0d0c;
    --color-background-secondary: #171514;
    --color-background-tertiary:  #211f1d;
    --color-surface:              #1c1a18;
    --color-surface-hover:        #262422;

    /* Text — identical canonical ramp (no fork with [data-theme=dark]).
       TERTIARY-as-text lightened #847d76 → #88817a to clear AA on the real
       dark surfaces (#1c1a18 4.52:1 / #171514 4.74:1); matches the
       [data-theme=dark] block exactly so the two dark paths never drift. */
    --color-text-primary:   #f5f2ed;
    --color-text-secondary: #a8a29e;
    --color-text-tertiary:  #88817a;
    --color-text-disabled:  #52504e;
    --color-text-inverse:   #0e0d0c;

    /* Borders */
    --color-border:        #302c28;
    --color-border-hover:  #423d38;
    --color-border-focus:  #2dd4bf;

    /* Raw neutral stops consumed directly — match the [data-theme=dark] block. */
    --color-neutral-0:   #1c1a18;
    --color-neutral-200: #302c28;
    --color-neutral-900: #f5f2ed;

    /* Warmer status hues */
    --color-success:      #0e9f6e;
    --color-success-text: #34d399;
    /* ERROR-as-text restored to bright dark red (matches [data-theme=dark]).
       The slides :root #b91c1c shadows the shared dark #f87171 by source order,
       so it must be re-declared here too or dark error text drops to 2.51:1.
       #f87171 → 5.88:1 (err-bg/surface) / 6.59:1 (err-bg/background) — AA. */
    --color-error-text:   #f87171;
    /* INFO: --color-info is the vivid DOT blue (#3b82f6 → 4.37:1 on the
       translucent info-bg over dark surface, clears the 3:1 non-text rule);
       --color-info-text is the pill LABEL ink. #5a82e0 was 4.36:1 (under AA)
       as text; #7da3ef → 6.39:1 (matches [data-theme=dark]). */
    --color-info:         #3b82f6;
    --color-info-text:    #7da3ef;

    /* Brightened amber WARN ink (matches the [data-theme=dark] block). */
    --color-warning-text: #fbbf24;

    /* On-teal ink → dark (matches the [data-theme=dark] block exactly). */
    --color-on-primary:   #04110f;

    /* Shadows — match the [data-theme=dark] ladder exactly */
    --shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.04);
    --shadow-sm: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-md: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 2px 4px rgb(0 0 0 / 0.45);
    --shadow-lg: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 8px 16px -4px rgb(0 0 0 / 0.5);
    --shadow-xl: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 40px -8px rgb(0 0 0 / 0.55);
    --shadow-2xl: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 48px -12px rgb(0 0 0 / 0.55);
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.05);
    --shadow-card-hover: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 8px -2px rgb(0 0 0 / 0.45);
  }
}