/* ═══════════════════════════════════════════════════════════════
   tokens.css — CloudAvid / AVID Download — Design System
   Style: Obsidian Kinetic — enterprise dark surface + Cyber Amber accent
   Fonts: self-hosted Inter / JetBrains Mono / Vazirmatn (see @font-face)
   Geometry: pill-first controls, tiered cards and panels
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   SELF-HOSTED FONTS — Phase 1 / D6
   Served same-origin so they satisfy `font-src 'self' data:`.
   font-display:swap everywhere so text paints immediately.
   ─────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/assets/fonts/Cinzel-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Huly core palette ── */
    --color-obsidian-canvas: #303236;
    --color-void: #090a0c;
    --color-charcoal-card: #111111;
    --color-slate-edge: #4a4b50;
    --color-iron-veil: #6b6c6d;
    --color-smoke: #95979e;
    --color-ash: #a9a9aa;
    --color-frost: #d1d1d1;
    --color-linen: #e5e5e7;
    --color-snow: #ffffff;
    --color-electric-iris: #c3c0ff;
    --color-ember-pulse: #ffb800;
    --color-molasses: #5a250a;

    /* ── Spacing scale (4px base) ── */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s7: 28px;
    --s8: 32px;
    --s10: 40px;
    --s12: 48px;
    --s14: 56px;
    --s16: 64px;
    --s20: 80px;
    --s24: 96px;

    /* ── Radius (pill-first system) ── */
    --r1: 4px;
    --r2: 6px;
    --r3: 8px;
    --r4: 12px;
    --r5: 16px;
    --r6: 30px;
    --r-full: 9999px;
    --radius: 12px;

    --radius-tags: 9999px;
    --radius-cards: 12px;
    --radius-inputs: 9999px;
    --radius-panels: 0.5rem;
    --radius-buttons: 9999px;

    /* ── Iris ramp (legacy --a-* aliases, now Electric Iris) ── */
    --a-1: #12213c;
    --a-2: #1d3a6b;
    --a-3: #2f5cb2;
    --a-4: #4a78cf;
    --a-5: #5683da;
    --a-6: #7ea4e5;
    --a-7: #a9c3ee;
    --a-8: #dce7fa;

    /* ── Semantic (status only — never brand accents) ── */
    --danger: #ef4444;
    --success: #10b981;
    --warning: #ff8964;

    /* ── Motion ── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --dur-1: 150ms;
    --dur-2: 200ms;
    --dur-3: 350ms;

    /* ── Typography families (D6 — self-hosted) ──
       NOTE: --font-hero is intentionally NOT repointed. It is consumed by the
       frozen Hero headline (.hero-content h1) and must keep its pre-redesign
       value per D8/I21. */
    --font: 'Inter', 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: 'Inter', 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Inter', 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Vazirmatn', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    --font-hero: 'Cinzel', 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-fa: 'Vazirmatn', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'Vazirmatn', 'SF Mono', ui-monospace, monospace;

    /* ── Obsidian Kinetic scales (D4/D6) ── */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --gutter: 1rem;
    --gutter-desktop: 1.5rem;

    --z-base: 0;
    --z-sticky: 50;
    --z-dropdown: 100;
    --z-dropdown-high: 200;
    --z-autocomplete: 1000;
    --z-banner: 9999;
    --z-debug: 99998;
    --z-toast: 99999;
    --z-modal: 999999;

    --nav-h: 56px;
    --nav-h-mobile: 52px;

    /* ── Type scale (Obsidian Kinetic) ── */
    --text-headline-xl: 2.25rem;
    --text-headline-xl-mobile: 1.75rem;
    --text-headline-lg: 1.5rem;
    --text-headline-sm: 1.125rem;
    --text-body-lg: 0.9375rem;
    --text-body-md: 0.8125rem;
    --text-label-code: 0.75rem;
    --text-label-mono-sm: 0.6875rem;
    --text-label-kpi: 1.25rem;

    /* ── Legacy type scale (Huly) ── */
    --text-caption: 11px;
    --text-body: 14px;
    --text-subheading: 18px;
    --text-heading-sm: 22px;
    --text-heading: 24px;
    --text-display-sm: 32px;
    --text-display: clamp(42px, 6.4vw, 80px);
}

/* ───────────────────────────────────────────────────────────────
   LIGHT THEME — calm editorial band: snow cards on linen canvas
   ─────────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* ─── OKLCH token foundation ─────────────────────────────────────────────
       Neutral ramp: hue 240, chroma ~0.006 (near-achromatic, cool lean)
       Accent ramp:  hue 224, Electric Iris family
    ─────────────────────────────────────────────────────────────────────── */

    /* Neutral ramp — 12 steps, even lightness stride */
    --n-0: oklch(100% 0 0);
    /* pure white (overlay only)     */
    --n-1: oklch(98% 0.004 240);
    /* #f7f7f8 — page canvas         */
    --n-2: oklch(96% 0.005 240);
    /* #f0f0f2 — sunken / code bg    */
    --n-3: oklch(94% 0.005 240);
    /* #eaeaec — card bg             */
    --n-4: oklch(91% 0.005 240);
    /* #e3e3e5 — input bg            */
    --n-5: oklch(86% 0.006 240);
    /* #d5d5d8 — border default      */
    --n-6: oklch(78% 0.007 240);
    /* #c0c0c3 — border hover        */
    --n-7: oklch(62% 0.008 240);
    /* #959599 — muted text          */
    --n-8: oklch(48% 0.008 240);
    /* #6e6e72 — secondary text      */
    --n-9: oklch(36% 0.007 240);
    /* #505054 — body text (dim)     */
    --n-10: oklch(24% 0.006 240);
    /* #333337 — body text           */
    --n-11: oklch(14% 0.005 240);
    /* #1c1c1e — headings            */
    --n-12: oklch(8% 0.004 240);
    /* #0d0d0f — near-black          */

    /* Accent ramp — hue 224 (Electric Iris #5683da) */
    --a-1: oklch(97% 0.018 224);
    /* tinted surface                */
    --a-2: oklch(93% 0.036 224);
    /* hover tint                    */
    --a-3: oklch(86% 0.072 224);
    /* active tint / selection       */
    --a-4: oklch(72% 0.130 224);
    /* lighter accent                */
    --a-5: oklch(58% 0.170 224);
    /* primary — #5683da equiv       */
    --a-6: oklch(50% 0.175 224);
    /* primary hover                 */
    --a-7: oklch(42% 0.170 224);
    /* primary active / text accent  */
    --a-8: oklch(32% 0.140 224);
    /* deep accent                   */

    /* Semantic: destructive (hue 25 — warm red, not harsh) */
    --e-surface: oklch(97% 0.020 25);
    --e-border: oklch(80% 0.080 25);
    --e-text: oklch(48% 0.180 25);
    /* 4.8:1 on --n-1 ✓             */

    /* ─── shadcn-compatible semantic tokens ─────────────────────────────── */
    --background: var(--n-1);
    --foreground: var(--n-11);

    --card: var(--n-0);
    --card-foreground: var(--n-11);

    --popover: var(--n-0);
    --popover-foreground: var(--n-11);

    --primary: var(--a-5);
    --primary-foreground: var(--n-0);

    --secondary: var(--n-3);
    --secondary-foreground: var(--n-10);

    --muted: var(--n-2);
    --muted-foreground: var(--n-7);

    --accent: var(--a-5);
    --accent-foreground: var(--n-0);

    --destructive: var(--e-text);
    --destructive-foreground: var(--n-0);

    --border: rgba(0, 0, 0, 0.1);
    --input: var(--n-4);
    --ring: #ffb800;

    /* ─── surface roles (light Obsidian Kinetic) ────────────────────────── */
    --bg: #f5f5f0;
    --bg-card: #ffffff;
    --bg-hover: #eeeee8;
    --bg-input: #f0f0ea;
    --bg-elevated: #ffffff;
    --bg-sunken: var(--n-2);

    --border-default: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.16);
    --border-focus: #ffb800;

    /* ─── text roles ─────────────────────────────────────────────────────── */
    --text: #1f1f23;
    /* headings / labels             */
    --text-2: #343538;
    /* body                          */
    --text-3: #514532;
    /* secondary                     */
    /* Task 2.2 (a11y-ux-debt): this step used to resolve to #9e8f78, which
       measured 3.16:1 on --bg-card - below the 4.5:1 floor for body text. It
       is aliased to the step above because:
         - the token cannot be deleted: the frozen browse.css references it in
           six selectors, so removing the declaration would break them;
         - a four-step muted scale is not achievable here. The step above
           already sits at 4.37:1 on --n-4, so any value dimmer than it cannot
           clear 4.5:1. Aliasing cannot invert the scale by construction.
       Hierarchy at the quiet end is carried by font size and weight. */
    --text-4: var(--text-3);
    /* placeholder / disabled        */
    --text-accent: #8a5a00;
    /* inline links                  */
    --text-on-accent: #ffffff;

    /* ─── Browse redesign: info / cyan accent ───────────────────────────────
       Added by browse-inspector-redesign. The only colour the ported Material-3
       scale has no project equivalent for. Deepened for light mode so it clears
       the 4.5:1 body-text floor on --bg-card; the dark value is the exact
       mockup tertiary (#a5ebff). See the mapping table at the end of this file. */
    --info: #0d6b7a;

    /* ─── glass / overlay surfaces ──────────────────────────────────────── */
    --surface-glass: rgba(255, 255, 255, 0.75);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --input-bg: #f0f0ea;

    /* ─── hero gradient (light mode) ── FROZEN per D8/I21 — value unchanged ── */
    --hero-grad: linear-gradient(160deg,
            oklch(97% 0.022 224) 0%,
            oklch(100% 0.010 224) 55%,
            oklch(98% 0.008 60) 100%);

    /* ─── glow / ambient color ───────────────────────────────────────────── */
    --glow: rgba(255, 184, 0, 0.09);
    --glow-strong: rgba(255, 184, 0, 0.21);
    --glow-warm: rgba(255, 184, 0, 0.09);
    /* amber warm accent      */
    --ember-glow: rgba(255, 184, 0, 0.12);

    /* ─── shadow system (light: same geometry, ~50% opacity) ─────────────── */
    --shadow-xs: 0 1px 2px rgba(28, 28, 30, 0.03);
    --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.03),
        0 2px 4px rgba(28, 28, 30, 0.02);
    --shadow-md: 0 2px 8px rgba(28, 28, 30, 0.03),
        0 4px 16px rgba(28, 28, 30, 0.025);
    --shadow-lg: 0 4px 12px rgba(28, 28, 30, 0.025),
        0 10px 30px rgba(28, 28, 30, 0.035);
    --shadow-xl: 0 6px 24px rgba(28, 28, 30, 0.04),
        0 20px 48px rgba(28, 28, 30, 0.03);
    --shadow-card: 0 1px 2px rgba(28, 28, 30, 0.02),
        0 1px 3px rgba(28, 28, 30, 0.015);
    --shadow-subtle: 0 0 0 1px rgba(255, 184, 0, 0.25);

    /* focus ring — amber halo */
    --shadow-ring: 0 0 0 3px rgba(255, 184, 0, 0.25);
}

/* ───────────────────────────────────────────────────────────────
   DARK THEME — the Huly product surface: obsidian + charcoal
   ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    /* — shadcn semantic tokens — */
    --background: 220 3% 20%;
    --foreground: 0 0% 100%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 100%;

    --primary: 220 64% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 3% 26%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 3% 24%;
    --muted-foreground: 225 1% 61%;

    --accent: 220 64% 60%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;

    --border: 225 4% 30%;
    --input: 225 4% 30%;
    --ring: 220 64% 60%;

    /* — neutral ramp — */
    --n-0: #090a0c;
    --n-1: #111112;
    --n-2: #1a1b1e;
    --n-3: #232428;
    --n-4: #2b2d31;
    --n-5: #4a4b50;
    --n-6: #6b6c6d;
    --n-7: #95979e;
    --n-8: #a9a9aa;
    --n-9: #c7c8cb;
    --n-10: #d1d1d1;
    --n-11: #e9e9ea;
    --n-12: #ffffff;

    /* — surface roles (Obsidian Kinetic) — */
    --bg: #121316;
    --bg-card: #1b1b1f;
    --bg-hover: #292a2d;
    --bg-input: #1f1f23;
    --bg-elevated: #343538;
    --bg-sunken: #0d0e11;

    /* — border roles — */
    --border: rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-focus: #ffb800;

    /* — text roles — */
    --text: #e3e2e6;
    --text-2: #d5c4ab;
    /* Task 2.3 (a11y-ux-debt): #9e8f78 measured 5.44:1 on --bg-card but only
       4.37:1 on --n-4 and 3.89:1 on --bg-elevated, both below the floor.
       #a99d8a clears every surface: 6.44 on --bg-card, 5.17 on --n-4,
       4.60 on --bg-elevated. */
    --text-3: #a99d8a;
    /* Task 2.2 (a11y-ux-debt): aliased to the step above. This used to be
       #514532, which measured 1.84:1 on --bg-card. The token is kept (the
       frozen browse.css references it six times) but no longer resolves to a
       sub-AA value. */
    --text-4: var(--text-3);
    --text-accent: #ffdca1;
    --text-on-accent: #412d00;

    /* — Browse redesign: info / cyan accent — see the mapping table at EOF — */
    --info: #a5ebff;

    /* — glass & overlays — */
    --surface-glass: rgba(31, 31, 35, 0.75);
    --nav-bg: rgba(27, 27, 31, 0.85);
    --input-bg: rgba(31, 31, 35, 0.75);

    /* — hero gradient —
       FROZEN per D8/I21: consumed only by .hero-max. Value unchanged. */
    --hero-grad: linear-gradient(180deg, #090a0c 0%, #0d0e12 100%);

    /* — glow tokens — */
    --glow: rgba(255, 184, 0, 0.15);
    --glow-strong: rgba(255, 184, 0, 0.35);
    --glow-warm: rgba(255, 184, 0, 0.15);
    --ember-glow: rgba(255, 184, 0, 0.18);

    /*
     * Dark-mode shadow philosophy (Obsidian Kinetic):
     * Dark surfaces separate via border contrast, so drop shadows stay
     * tight and low-opacity. --shadow-subtle is an amber focus halo.
     */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.08);
    --shadow-xl: 0 6px 25px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-subtle: 0 0 0 1px rgba(255, 184, 0, 0.25);
    --shadow-ring: 0 0 0 3px rgba(255, 184, 0, 0.25);

    /* — error surface roles — */
    --e-surface: rgba(147, 0, 10, 0.12);
    --e-border: rgba(255, 180, 171, 0.25);
    --e-text: #ffb4ab;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MATERIAL-3 → PROJECT TOKEN MAP
   Added by browse-inspector-redesign (task 1.1/1.2).

   The Browse redesign was drafted against a Material-3 palette, which cannot ship
   verbatim: the mockup loads Tailwind, Google Fonts, and Material Symbols, every
   one a remote origin blocked by `script-src 'self'` / `font-src 'self' data:`
   (lib/http-utils.js). This table is the authoritative translation.

   Only the 16 colours actually referenced by the mockup's markup are listed. The
   remaining entries in the mockup's Tailwind config are generator boilerplate
   (unused role pairs such as `on-secondary-container`) and are deliberately not
   ported — they would be dead tokens.

   Every value below was checked against the dark theme block above. The six
   surface tiers and every on-surface/primary role match the mockup's hex exactly;
   only `tertiary` had no equivalent, and it is the single token this file adds.
   ═══════════════════════════════════════════════════════════════════════════════ */

/*   M3 colour              mockup hex   project token (dark)              note
   ───────────────────────────────────────────────────────────────────────────────
   surface                  #121316      --bg                               exact
   background               #121316      --bg                               exact
   surface-container        #1f1f23      --bg-input                         exact
   surface-container-low    #1b1b1f      --bg-card                          exact
   surface-container-lowest #0d0e11      --bg-sunken                        exact
   surface-container-high   #292a2d      --bg-hover                         exact
   surface-container-highest#343538      --bg-elevated                      exact
   surface-variant          #343538      --bg-elevated                      exact
   on-surface               #e3e2e6      --text                             exact
   on-background            #e3e2e6      --text                             exact
   on-surface-variant       #d5c4ab      --text-2                           exact
   on-primary               #412d00      --text-on-accent                   exact
   primary                  #ffdca1      --text-accent                      exact
   primary-container        #ffb800      --color-ember-pulse                exact
   secondary                #c3c0ff      --color-electric-iris              exact
   error                    #ffb4ab      --e-text                           exact
   tertiary                 #a5ebff      --info                             NEW TOKEN
   ───────────────────────────────────────────────────────────────────────────────
   The following four do NOT match by hex, on purpose:

   outline          #9e8f78  →  --text-3   a11y-ux-debt task 2.3 re-pointed this
                                        step to #a99d8a for contrast. The mockup
                                        value measured 3.89:1 on --bg-elevated.
   outline-variant  #514532  →  --text-4   a11y-ux-debt task 2.2 aliased this up
                                        to --text-3; #514532 measured 1.84:1.
   on-primary-container #6b4c00 → --text-2 used for the one translucent amber chip
   surface-bright   #38393d  →  --bg-elevated no exact pair; nearest tier is fine.

   Typography is a 1:1 match and needs no port. The mockup's Tailwind type scale
   was derived from this file:
     headline-xl → --text-headline-xl    body-lg      → --text-body-lg
     headline-lg → --text-headline-lg    body-md      → --text-body-md
     headline-sm → --text-headline-sm    label-code   → --text-label-code
     label-mono-sm→ --text-label-mono-sm label-kpi    → --text-label-kpi

   Radius maps onto the existing scale. Note the mockup's `full: 0.75rem` is a
   generator bug — full-round is --radius-tags / --r-full (9999px), not a size.
     sm      → --radius-sm       md      → --radius-md
     lg      → --radius-lg       xl      → --radius-xl
     DEFAULT → --radius-md       full    → --radius-tags
*/
/* ── Persian (fa) — Vazirmatn leads every sans stack so digits, spaces and
   punctuation inside Persian text share one face instead of falling to Inter.
   Mono stacks already carry Vazirmatn as the second family. ── */
:root[lang="fa"],
:root[dir="rtl"] {
    --font: var(--font-fa);
    --font-display: var(--font-fa);
    --font-heading: var(--font-fa);
}