/* Encore design-system tokens.
 *
 * Transcribed from the ENCORE handoff bundle (Claude Design export,
 * `encore/project/tokens/`). Treat this half of the file as generated: when the
 * bundle is updated, re-transcribe rather than hand-tuning values here.
 *
 * Definitions only — no selectors are styled. Everything that changes how a
 * page looks lives in ui.css behind the `.enc` scope, so a page that does not
 * opt in renders exactly as before.
 */

/* ── Faces ──
 * Vendored rather than loaded from Google Fonts: the CSP allows no external
 * style or font origin (server/security-headers.ts), so an @import would be
 * blocked twice over. Subsets carry their unicode-range, so latin-ext is only
 * fetched if a page actually needs one of its glyphs.
 *
 * DM Sans replaced Exo as the heading face in DS v2. It ships here as a single
 * variable file (400-900) rather than static cuts: the app uses four of its
 * weights, and one axis is smaller than four subsets of one weight would be.
 *
 * DM Sans has no Cyrillic subset upstream. Inter is next in the heading stack
 * so Cyrillic still renders, but the rule is: DM Sans for static UI chrome
 * (always English), Inter for anything a user or the LLM produced. That way a
 * heading never mixes two faces mid-word.
 */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/enc/fonts/dmsans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/enc/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/enc/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/enc/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* What the browser draws for itself: the media transport bars, native form
     controls, the autofill wash. Without this they stay light whatever the
     page is painted, and a player on a near-black surface is a white slab. */
  color-scheme: dark;

  /* ── Brand palette (Blood Rust) ── */
  --blood-rust: #790000;   /* PRIMARY · fills that carry a light foreground */
  --crimson: #C1111F;      /* action / hover, and the only red legible small on dark */
  --mystic-blue: #669BBC;
  --deep-oceanic: #003049;
  --vanilla-cream: #FDF0D5;
  --white: #FFFFFF;
  --ink: #1A0505;          /* text on light */

  /* The sheet's one brand accent: buttons, focus rings, active marks. It has to
     follow the theme, not the swatch -- Blood Rust on the near-black canvas is
     1.65:1 and vanishes, so on dark it resolves to Crimson and only on cream
     does it become Blood Rust. Large brand fills use --bg-brand instead. */
  --red: var(--accent-on-dark);
  --rose: #C9A3A3;         /* muted copy on dark */
  /* Kept as aliases: the status roles below were written against the v1 names,
     and a badge does not care which swatch sheet its red came from. */
  --red-persian: var(--crimson);
  --amber: #F59E0B;

  /* Red ramp (hovers / tints) */
  --red-bright: var(--crimson);
  --red-600: #9A0410;
  --red-deep: #4E0000;

  /* ── Dark surfaces ── */
  --bg-deep: #120000;      /* deepest floor */
  --bg-base: #1C0202;      /* primary dark surface */
  --surface-1: #260405;    /* card on dark */
  --surface-2: #360809;    /* raised / hover */
  --surface-3: #470D0E;    /* strongest tint */
  --hairline-dark: rgba(255, 255, 255, 0.10);

  /* Glows — the radial light behind heroes and marks. Never behind body copy,
     tables or cards; see the DS "red glow recipe" guideline. */
  --glow-red: radial-gradient(60% 80% at 50% 0%, rgba(193, 17, 31, 0.50) 0%, rgba(121, 0, 0, 0.18) 45%, transparent 75%);
  --glow-ember: radial-gradient(90% 120% at 50% -10%, #470D0E 0%, #1C0202 55%, #120000 100%);

  /* ── Semantic aliases ── */
  --bg-page: var(--bg-base);
  --bg-card: var(--surface-1);
  --bg-brand: var(--blood-rust);

  --text-primary: var(--white);
  --text-secondary: var(--rose);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-brand: var(--crimson);
  --text-link: var(--crimson);

  /* Roles added by v2, and the reason the theme can flip at all: a heading
     painted --white stays white on cream. Use these, never the raw swatch. */
  --text-heading: var(--white);
  --text-invert: var(--ink);
  --surface-invert: var(--white);   /* solid CTA pill */
  --text-on-invert: var(--ink);
  --on-brand: var(--white);         /* foreground on a Blood Rust / Crimson fill */

  /* Small marks — glyphs, bullets, links, counters. Blood Rust is too dark to
     read at 12-14px on the rust-black base, so on dark this is Crimson; on
     cream it flips to Blood Rust, which lands near 9:1 there. */
  --accent-on-dark: var(--crimson);

  /* Frosted glass (nav pill, inset hairlines on cards). */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --card-inset: rgba(255, 255, 255, 0.06);

  --border-hairline: var(--hairline-dark);
  --border-brand: var(--crimson);
  --focus-ring: var(--crimson);

  /* ── Typography ── */
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-heading: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heading: 600;

  /* Heading scale (DM Sans) — sized for landing pages; see the app scale below. */
  --fs-h1: 96px;
  --fs-h2: 64px;
  --fs-h3: 56px;
  --fs-h4: 48px;
  --fs-h5: 40px;
  --fs-h6: 32px;

  /* Body scale (Inter) */
  --fs-body-xl: 24px;
  --fs-body-lg: 20px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-body-xs: 12px;

  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-tight: 1.05;

  --tracking-tight: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-caps: 0.14em;

  /* ── Spacing, radius, shadow, motion ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 80px;
  --space-8: 120px;
  --gutter: 48px;
  --content-max: 1440px;

  --radius-sm: 6px;
  --radius-tile: 12px;
  --radius-media: 24px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  --stroke: 1px;
  --stroke-strong: 2px;

  --shadow-tile: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-red: 0 12px 40px rgba(193, 17, 31, 0.35);
  --shadow-lift: 0 30px 80px rgba(0, 0, 0, 0.6);
  --ring-brand: 0 0 0 1px rgba(193, 17, 31, 0.4), 0 0 40px rgba(193, 17, 31, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Application layer — NOT from the handoff bundle.
 *
 * The design system was drawn for a marketing site: its type scale starts at
 * 32px, it has no dense-UI steps, and it defines no status colours. These
 * additions fill those gaps without inventing a second palette — every colour
 * below resolves to a value the DS already ships.
 * ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Type scale for dense UI. The DS scale stays available for hero sections. */
  --fs-app-2xl: 30px;   /* page title */
  --fs-app-xl: 24px;    /* section title */
  --fs-app-lg: 20px;    /* card title */
  --fs-app-md: 16px;    /* body copy */
  --fs-app-base: 14px;  /* table cells, controls — the app default */
  --fs-app-sm: 13px;    /* metadata */
  --fs-app-xs: 12px;    /* column headers, eyebrows */

  /* The DS steps jump 12 -> 20 -> 32; shadcn's control and table paddings need
     16 and 24. Named by value so they don't pose as part of the DS sequence. */
  --space-16: 16px;
  --space-24: 24px;

  /* Surface roles. The DS ramp is red-tinted, which reads as branded behind a
     little text and as fatiguing behind a lot of it — so the least-tinted end
     carries the reading surfaces and the rust-black carries the chrome. */
  --bg-canvas: var(--bg-deep);      /* long-form reading: transcripts, tables */
  --bg-chrome: var(--bg-base);      /* nav, headers — little text */
  --bg-raised: var(--surface-2);    /* hover, popovers */
  --bg-active: var(--surface-3);    /* selected */

  /* A hairline is drawn solid and continuous; dashed at the same strength it
     breaks up into something invisible. One step up, for the dropzone. */
  --border-hairline-strong: rgba(255, 255, 255, 0.2);

  /* Metadata sits at 12-13px and gets read for minutes at a time, so it wants
     more than the 6:1 that --text-muted gives; this lands near 8.6:1 on
     --surface-1. --text-muted stays correct for 16px and up. */
  --text-muted-strong: rgba(255, 255, 255, 0.68);

  /* Border by role. --border-hairline is 10% white — 1.28:1 on --surface-1,
     which is what makes it read as a hairline and is fine for the things it was
     drawn for: card edges, table dividers, popover boundaries. WCAG 1.4.11 asks
     3:1 of anything that tells you where a *control* is, though, and the DS has
     no such value, so an input at 10% is a control with no visible edge. 38% is
     the first step that clears it with margin (3.45:1) on every surface the app
     puts a field on; hover doubles down so the state change stays legible. */
  /* Copy sitting on a brand *tint* rather than a brand fill: the tint is close
     to the card, so the label has to carry the brand at reading contrast. Lifted
     toward white on dark; on cream the same role is the darkest brand value. */
  --text-on-tint: color-mix(in oklab, var(--red-bright) 58%, var(--white));

  --border-control: rgba(255, 255, 255, 0.38);
  --border-control-hover: rgba(255, 255, 255, 0.55);   /* 5.98:1 */

  /* Status. The DS has no semantic states and --red is the brand, so a red
     "error" would read as decoration. These are DS colours reassigned:
     --status-done is the one value promoted out of a component (the Navbar's
     hardcoded online dot). */
  --status-done: #3FD07A;
  --status-processing: var(--amber);
  --status-failed: var(--crimson);
  --status-info: var(--mystic-blue);
  --status-tint: 18%;   /* badge fill strength, mixed per status in ui.css */

  /* Failure is the one state a user has to be able to read, and Crimson gives
     3.9:1 on --surface-1 — enough for a border or a fill, short of AA for a
     word. So the word takes a lighter step (5.9:1) and fills keep Crimson,
     which is also what keeps the two reds from collapsing into one. */
  --status-failed-text: #FF6B5A;

  /* Radius by role. shadcn is uniformly 6px; the DS button is a pill. Both are
     kept, assigned by what the element is rather than by which system it's from. */
  --radius-control: var(--radius-pill);   /* buttons, chips */
  --radius-field: var(--radius-sm);        /* inputs, selects */
  --radius-surface: var(--radius-tile);    /* cards, tables, dialogs */
}

/* ────────────────────────────────────────────────────────────────────────────
 * Light theme — `data-theme="light"` on <html>.
 *
 * Same names, warm Vanilla Cream values. It has to come after both :root
 * blocks above: an attribute selector and :root weigh the same, so order is
 * what decides. Nothing here styles an element, so a page that has not opted
 * into `.enc` is unaffected whichever theme is set.
 *
 * On cream Blood Rust reads near 9:1, so the two reds swap jobs: Blood Rust
 * becomes the small-mark accent and Crimson falls back to hover and fills.
 * ──────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Tells the browser which way to paint what it draws itself -- native
     controls, the scrollbar, the autofill wash. Without it a cream page keeps
     dark form furniture. */
  color-scheme: light;

  --bg-deep: #F4E5C4;      /* deepest band / footer */
  --bg-base: #FDF0D5;      /* page */
  --surface-1: #FFFFFF;    /* card */
  --surface-2: #FFFAF0;    /* raised card */
  --surface-3: #F8ECD2;    /* strongest tint */
  --rose: #7A5B57;

  --glow-red: radial-gradient(60% 80% at 50% 0%, rgba(121, 0, 0, 0.14) 0%, rgba(193, 17, 31, 0.05) 45%, transparent 75%);
  --glow-ember: radial-gradient(90% 120% at 50% -10%, #FFF8E6 0%, #FDF0D5 55%, #F6E6C6 100%);

  --text-primary: var(--ink);
  --text-heading: var(--ink);
  --text-muted: rgba(26, 5, 5, 0.58);
  --text-invert: var(--white);
  --text-brand: var(--blood-rust);
  --text-link: var(--blood-rust);
  --accent-on-dark: var(--blood-rust);

  --surface-invert: var(--ink);
  --text-on-invert: var(--vanilla-cream);

  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-border: rgba(26, 5, 5, 0.12);
  --card-inset: rgba(26, 5, 5, 0.08);

  --hairline-dark: rgba(26, 5, 5, 0.14);
  --border-brand: var(--blood-rust);
  --focus-ring: var(--blood-rust);

  /* Shadows carry the lift on light surfaces, where a tint step cannot. */
  --shadow-tile: 0 1px 0 rgba(255, 255, 255, 0.70) inset, 0 18px 40px rgba(74, 20, 10, 0.10);
  --shadow-lift: 0 30px 70px rgba(74, 20, 10, 0.16);

  /* ── Application layer, same order as the block that defines it ── */

  /* On cream a raised surface has to go *darker*: --surface-2 and -3 are card
     tints here, and reusing them for hover and selection is a no-op. */
  --bg-raised: #F4E5C4;
  --bg-active: #EBD8AE;

  --border-hairline-strong: rgba(26, 5, 5, 0.28);
  --text-muted-strong: rgba(26, 5, 5, 0.72);
  --text-on-tint: var(--blood-rust);

  /* Ink on cream loses more than white on black does: at the dark theme's
     mirror strength a field edge measured 2.28:1 on a card and 2.22:1 on the
     canvas, both under 1.4.11. Raised until the darker of the two backdrops
     clears 3:1, and hover raised with it so the two states stay apart. */
  --border-control: rgba(26, 5, 5, 0.48);      /* 3.49:1 card, 3.33:1 canvas */
  --border-control-hover: rgba(26, 5, 5, 0.62);

  /* The dark theme's green, amber and coral are all tuned to glow off a
     near-black card; on white they are pastels. These are the same states read
     at the other end of the ramp -- measured against their own 18% badge fill,
     which is where they are palest. */
  --status-done: #136A41;
  --status-processing: #8A4B00;
  --status-failed-text: #9A0410;
  --status-info: var(--deep-oceanic);
}