/*
 * DayZero Brand Tokens — single source of truth.
 *
 * Imported by:
 *   packages/tokens/theme.css        (--dz-* light/dark mappings)
 *   packages/tokens/color-blind.css  (red/green → blue/orange accessibility)
 *   frontend/src/index.css           (via theme.css — all pages)
 *   Server shells                    (/static/tokens/dz-pref-bootstrap.js)
 *
 * Mapped into Tailwind @theme / shadcn HSL tokens in index.css.
 *
 * Tailwind 4 @theme requires static values for tree-shaking,
 * so oklch equivalents are listed in comments only.
 *   accent:      oklch(0.21 0.01 260) = #16181c  (light)
 *   accent dark: oklch(0.93 0.015 90) = #f0e9db  (dark)
 *   success: oklch(0.62 0.19 145)  = #16a34a
 *   warning: oklch(0.68 0.16 85)   = #ca8a04
 *   error:   oklch(0.58 0.22 27)   = #dc2626
 *   info:    oklch(0.55 0.19 260)  = #2563eb
 */

:root {
  /* ── Brand accent (ink & cream) ────────────────────────────────
     Monochrome ink & cream, product-wide. The ember accent was
     retired from marketing first (founder direction 2026-08-17) and
     now from the product too: black-ink actions on light surfaces,
     cream actions on dark, with warmth carried by typography and
     photography rather than a hue. Matches the immutable marketing
     tokens below so signed-in and public surfaces tell one story.

     Two values, not one: light mode takes deep ink with cream text
     on top (#f5f0e6 on #16181c = 16.4:1), dark mode takes the cream
     with ink on top (#16181c on #f0e9db = 14.9:1). Keep both above
     4.5:1 if retuning. */
  --brand-accent: #16181c;
  --brand-accent-hover: #000000;
  --brand-accent-hsl: 220 12% 10%;

  --brand-accent-dark: #f0e9db;
  --brand-accent-hover-dark: #faf5ea;
  --brand-accent-hsl-dark: 40 41% 90%;

  /* Text to sit ON the accent, per theme (light ink takes cream,
     the dark-mode cream takes ink to stay legible). */
  --brand-accent-fg: #f5f0e6;
  --brand-accent-fg-dark: #16181c;

  /* ── Immutable marketing hue ───────────────────────────────────
     Monochrome ink & cream — the ember accent was retired from
     public pages (founder direction 2026-08-17): black and creamy
     white, with warmth carried by photography and the serif italic,
     not by a hue. Deliberately NOT remappable. data-house and
     data-skin let a signed-in user repaint the product accent, which
     is a good product feature and a bad brand one: a company whose
     colour the visitor picks has no colour. marketing.css pins
     --dz-accent to these inside .mkt-layout, so every public page
     renders one palette no matter what the visitor has themed. */
  --brand-marketing-accent: #16181c;
  --brand-marketing-accent-hover: #000000;
  --brand-marketing-accent-fg: #f5f0e6;
  --brand-marketing-accent-dark: #f0e9db;
  --brand-marketing-accent-hover-dark: #faf5ea;
  --brand-marketing-accent-fg-dark: #16181c;

  /* Starlight accent tints (dark default / light override) */
  --brand-accent-low: #101216;
  --brand-accent-high: #f0e9db;
  --brand-accent-low-light: #f4f1ea;
  --brand-accent-high-light: #16181c;

  /* Alpha variants — light ink (22, 24, 28) */
  --brand-accent-faint: rgba(22, 24, 28, 0.04);
  --brand-accent-subtle: rgba(22, 24, 28, 0.08);
  --brand-accent-soft: rgba(22, 24, 28, 0.1);
  --brand-accent-light: rgba(22, 24, 28, 0.12);
  --brand-accent-medium: rgba(22, 24, 28, 0.15);
  --brand-accent-glow: rgba(22, 24, 28, 0.2);
  --brand-accent-emphasis: rgba(22, 24, 28, 0.3);
  /* Dark cream (240, 233, 219) — tints read against the dark page. */
  --brand-accent-glow-dark: rgba(240, 233, 219, 0.25);

  /* ── Typography ────────────────────────────────────────────── */
  --brand-font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --brand-font-readable:
    "Lexend", -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-dyslexic:
    "OpenDyslexic", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Semantic colors (light) ───────────────────────────────── */
  --brand-success: #16a34a;
  --brand-success-bg: rgba(22, 163, 74, 0.1);
  --brand-warning: #ca8a04;
  --brand-warning-bg: rgba(202, 138, 4, 0.1);
  --brand-error: #dc2626;
  --brand-error-bg: rgba(220, 38, 38, 0.1);
  --brand-info: #2563eb;
  --brand-info-bg: rgba(37, 99, 235, 0.1);

  /* ── Semantic colors (dark) ────────────────────────────────── */
  --brand-success-dark: #22c55e;
  --brand-success-bg-dark: rgba(34, 197, 94, 0.15);
  --brand-warning-dark: #eab308;
  --brand-warning-bg-dark: rgba(234, 179, 8, 0.15);
  --brand-error-dark: #ef4444;
  --brand-error-bg-dark: rgba(239, 68, 68, 0.15);
  --brand-info-dark: #3b82f6;
  --brand-info-bg-dark: rgba(59, 130, 246, 0.15);

  /* Positive/negative branch colours — alias success/error; remapped with them
     in color-blind.css via --dz-success / --dz-error. */
  --brand-cb-positive: var(--brand-success);
  --brand-cb-negative: var(--brand-error);
  --brand-cb-positive-dark: var(--brand-success-dark);
  --brand-cb-negative-dark: var(--brand-error-dark);

  /* ── Code block colors ─────────────────────────────────────── */
  --brand-code-bg: #1a1e2e;
  --brand-code-text: #cdd6f4;
  --brand-code-bg-dark: #141821;
  --brand-code-text-dark: #cdd6f4;

  /* ═══════════════════════════════════════════════════════════════
     Scale reference — type, spacing, radius.

     Documented single source of truth for sizing. Tailwind utilities
     (text-sm, p-4, rounded-lg, etc.) remain the day-to-day API; these tokens
     exist so the scale is written down in ONE place and so non-Tailwind
     surfaces (server-rendered marketing, inline styles) can reference the same
     ramp. When a design needs a one-off size, prefer the nearest step here
     over a brand-new arbitrary value.
     ═══════════════════════════════════════════════════════════════ */

  /* Type scale (px) — pairs with Tailwind's text-* utilities. */
  --brand-text-2xs: 10px; /* overlines, micro-badges */
  --brand-text-xs: 12px; /* text-xs — dense table/meta */
  --brand-text-sm: 14px; /* text-sm — default body/UI */
  --brand-text-base: 16px; /* text-base — readable body */
  --brand-text-lg: 18px;
  --brand-text-xl: 20px;
  --brand-text-2xl: 24px; /* page titles */
  --brand-text-3xl: 30px;

  /* Line heights. */
  --brand-leading-tight: 1.2;
  --brand-leading-normal: 1.5;
  --brand-leading-relaxed: 1.7; /* long-form / chat prose */

  /* Spacing scale (4px base) — pairs with Tailwind's padding/gap utilities. */
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-5: 20px;
  --brand-space-6: 24px;
  --brand-space-8: 32px;
  --brand-space-12: 48px;

  /* Radius scale — mirrors the Tailwind @theme --radius-* in index.css.
     Canonical card/control radius is --brand-radius-md (10px). The legacy
     `.dz-card` 6px radius is a known outlier; new surfaces should use md/lg. */
  --brand-radius-sm: 8px;
  --brand-radius-md: 10px;
  --brand-radius-lg: 12px;
  --brand-radius-xl: 16px;
  --brand-radius-pill: 9999px;

  /* ── Slate gray scale (blue-grey tinted) ───────────────────── */
  --brand-gray-50: #f8fafc;
  --brand-gray-100: #f1f5f9;
  --brand-gray-200: #e2e8f0;
  --brand-gray-300: #cbd5e1;
  --brand-gray-400: #94a3b8;
  --brand-gray-500: #64748b;
  --brand-gray-600: #475569;
  --brand-gray-700: #334155;
  --brand-gray-800: #1e293b;
  --brand-gray-900: #0f172a;
  --brand-gray-950: #020617;
}