/*
 * DayZero Theme Tokens — light/dark --dz-* mappings.
 *
 * Single source of truth for the DayZero design system tokens.
 * Maps brand.css primitives into semantic --dz-* properties.
 *
 * Imported by:
 *   frontend/src/index.css        (all pages: admin, chat, landing, docs, signup)
 *   app/static/css/*.css          (error pages, oauth shell, admin-base — via theme.css)
 *
 * Color-blind remaps: packages/tokens/color-blind.css (imported at end).
 *
 * Theme selectors: :root / [data-theme="light"] = light,
 *                  .dark / [data-theme="dark"]  = dark.
 *
 * Font selectors:  (no attr / [data-font="default"]) = Inter
 *                  [data-font="newsreader"] = Newsreader (app default)
 *                  [data-font="readable"]   = Lexend
 *                  [data-font="dyslexic"]   = OpenDyslexic
 *
 * Visual prefs (keys, defaults, valid values): packages/tokens/visual-prefs-defaults.js
 */

@import "./brand.css";

/* ── Light theme ──────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Faintly warm off-white so white surfaces (cards, bubbles, composer)
     read as surfaces instead of floating in a same-color void. Dark mode
     already separates page (#060810) from surface (gray-950). */
  --dz-bg-page: #fafaf9;
  --dz-bg-primary: #ffffff;
  --dz-bg-secondary: var(--brand-gray-100);
  --dz-bg-tertiary: var(--brand-gray-200);
  --dz-bg-elevated: #f8f8fa;
  /* Card surface. Marketing CSS referenced this token for years while it
     was never defined (every usage carried a --dz-bg-primary fallback);
     defining it as that same fallback makes the token real without a
     visual change, and gives card surfaces one place to diverge later. */
  --dz-bg-card: var(--dz-bg-primary);
  --dz-bg-hover: var(--brand-gray-300);
  --dz-bg-active: var(--brand-gray-300);

  --dz-text-primary: var(--brand-gray-900);
  --dz-text-secondary: var(--brand-gray-600);
  --dz-text-muted: var(--brand-gray-500);
  --dz-text-tertiary: var(--brand-gray-400);
  --dz-text-faint: var(--brand-gray-400);

  --dz-accent: var(--brand-accent);
  --dz-accent-hover: var(--brand-accent-hover);
  --dz-accent-fg: var(--brand-accent-fg);
  --dz-accent-faint: var(--brand-accent-faint);
  --dz-accent-subtle: var(--brand-accent-subtle);
  --dz-accent-soft: var(--brand-accent-soft);
  --dz-accent-light: var(--brand-accent-light);
  --dz-accent-medium: var(--brand-accent-medium);
  --dz-accent-glow: var(--brand-accent-glow);
  --dz-accent-emphasis: var(--brand-accent-emphasis);
  /* Border-weight accent tint. The marketing CSS referenced this token
     for a long time while it was never defined, so every use fell
     through to a hardcoded slate-blue literal that ignored both the
     theme and the active house. Defined here so those uses now track
     the accent like everything else. */
  --dz-accent-soft-border: color-mix(
    in srgb,
    var(--dz-accent) 28%,
    transparent
  );

  /* AI accent — tracks the selected house via --dz-ai (Ask AI surfaces).
     Default Amethyst keeps classic DayZero violet; other houses remap --dz-ai
     to the active accent (see house blocks below). Tailwind purple-* / violet-*
     utilities are remapped from --dz-ai in index.css. */
  --dz-ai: #8b5cf6;
  --dz-ai-strong: #7c3aed;
  /* Tints/halos of the AI accent (parallel to --dz-accent-subtle/medium/glow/
     faint). Derived from --dz-ai so they track the active skin/house from a
     single definition — used by the thinking/generating orb so it follows the
     selected house colour (including amethyst → violet). */
  --dz-ai-subtle: color-mix(in srgb, var(--dz-ai) 15%, transparent);
  --dz-ai-faint: color-mix(in srgb, var(--dz-ai) 8%, transparent);
  --dz-ai-medium: color-mix(in srgb, var(--dz-ai) 16%, transparent);
  --dz-ai-glow: color-mix(in srgb, var(--dz-ai) 22%, transparent);

  --dz-success: var(--brand-success);
  --dz-success-bg: var(--brand-success-bg);
  --dz-warning: var(--brand-warning);
  --dz-warning-bg: var(--brand-warning-bg);
  --dz-warning-fg: #ffffff;
  --dz-error: var(--brand-error);
  --dz-error-bg: var(--brand-error-bg);
  --dz-info: var(--brand-info);
  --dz-info-bg: var(--brand-info-bg);
  --dz-cb-positive: var(--dz-success);
  --dz-cb-negative: var(--dz-error);

  /* Semantic "glow" tints (parallel to --dz-accent-glow) for soft status
     fills/halos. Derived from the semantic tokens so they stay theme-aware
     from a single definition. */
  --dz-success-glow: color-mix(in srgb, var(--dz-success) 15%, transparent);
  --dz-warning-glow: color-mix(in srgb, var(--dz-warning) 15%, transparent);
  --dz-error-glow: color-mix(in srgb, var(--dz-error) 15%, transparent);
  --dz-info-glow: color-mix(in srgb, var(--dz-info) 15%, transparent);

  /* Code-block header chrome (always rendered on a dark code panel). */
  --dz-code-header-bg: rgba(255, 255, 255, 0.03);
  --dz-code-header-border: rgba(255, 255, 255, 0.06);
  --dz-code-header-hover: rgba(255, 255, 255, 0.08);

  /* ── Chart series palette ──
     Ordered categorical colors for graphs (bars, lines, donut segments).
     Charts should consume these instead of hardcoding hex so they follow
     the active skin (see the heritage overrides further down). */
  --dz-chart-1: #3b82f6;
  --dz-chart-2: #10b981;
  --dz-chart-3: var(--dz-ai);
  --dz-chart-4: #f59e0b;
  --dz-chart-5: #ef4444;
  --dz-chart-6: #06b6d4;
  /* Convenience aliases referenced by some charts; track the series palette
     so they follow the active skin without per-skin redefinition. */
  --dz-green: var(--dz-chart-2);
  --dz-amber: var(--dz-chart-4);

  --dz-border: var(--brand-gray-300);
  --dz-border-subtle: var(--brand-gray-200);
  --dz-border-hover: var(--brand-gray-400);
  --dz-overlay: rgba(0, 0, 0, 0.5);

  --dz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --dz-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --dz-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);
  --dz-shadow-accent: 0 4px 16px var(--dz-accent-glow);
  --dz-shadow-card:
    0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.06);

  --dz-code-bg: var(--brand-code-bg);
  --dz-code-text: var(--brand-code-text);

  /* ── Badge / status colors (tuned for contrast on light bg) ── */
  --dz-badge-success-bg: #f0fdf4;
  --dz-badge-success-text: #15803d;
  --dz-badge-warning-bg: #fffbeb;
  --dz-badge-warning-text: #92400e;
  --dz-badge-error-bg: #fef2f2;
  --dz-badge-error-text: #b91c1c;
  --dz-badge-info-bg: #eff6ff;
  --dz-badge-info-text: #1d4ed8;
  --dz-badge-purple-bg: color-mix(
    in srgb,
    var(--dz-ai) 8%,
    var(--dz-bg-primary)
  );
  --dz-badge-purple-text: var(--dz-ai-strong);
  --dz-badge-teal-bg: #f0fdfa;
  --dz-badge-teal-text: #0f766e;
  --dz-badge-amber-bg: #fffbeb;
  --dz-badge-amber-text: #92400e;
  --dz-badge-muted-bg: var(--dz-bg-secondary);
  --dz-badge-muted-text: var(--dz-text-muted);

  /* ── Compat aliases (shadcn-style shorthand) ─────────────────── */
  --dz-background: var(--dz-bg-primary);
  --dz-foreground: var(--dz-text-primary);
  --dz-muted-foreground: var(--dz-text-muted);
  --dz-secondary: var(--dz-bg-secondary);
  --dz-secondary-foreground: var(--dz-text-secondary);
  --dz-destructive: var(--dz-error);

  color-scheme: light;
}

/* ── Dark theme ───────────────────────────────────────────────── */
.dark,
[data-theme="dark"] {
  --dz-bg-page: #060810;
  --dz-bg-primary: var(--brand-gray-950);
  --dz-bg-secondary: var(--brand-gray-900);
  --dz-bg-tertiary: var(--brand-gray-800);
  --dz-bg-elevated: #0a0e18;
  --dz-bg-card: var(--dz-bg-primary);
  --dz-bg-hover: var(--brand-gray-700);
  --dz-bg-active: var(--brand-gray-600);

  --dz-text-primary: var(--brand-gray-50);
  --dz-text-secondary: var(--brand-gray-400);
  --dz-text-muted: var(--brand-gray-500);
  --dz-text-tertiary: var(--brand-gray-600);
  --dz-text-faint: var(--brand-gray-600);

  /* Dark mode takes the CREAM (#f0e9db) so the accent keeps contrast
     against the dark page, and ink on top of it — cream text on cream
     would vanish. See brand.css for the ramp. */
  --dz-accent: var(--brand-accent-dark);
  --dz-accent-hover: var(--brand-accent-hover-dark);
  --dz-accent-fg: var(--brand-accent-fg-dark);
  --dz-accent-glow: var(--brand-accent-glow-dark);

  /* AI accent — lighter violet for contrast on dark surfaces. */
  --dz-ai: #a78bfa;
  --dz-ai-strong: #8b5cf6;

  --dz-success: var(--brand-success-dark);
  --dz-success-bg: var(--brand-success-bg-dark);
  --dz-warning: var(--brand-warning-dark);
  --dz-warning-bg: var(--brand-warning-bg-dark);
  --dz-warning-fg: #ffffff;
  --dz-error: var(--brand-error-dark);
  --dz-error-bg: var(--brand-error-bg-dark);
  --dz-info: var(--brand-info-dark);
  --dz-info-bg: var(--brand-info-bg-dark);
  --dz-cb-positive: var(--dz-success);
  --dz-cb-negative: var(--dz-error);

  --dz-border: rgba(255, 255, 255, 0.06);
  --dz-border-subtle: var(--brand-gray-800);
  --dz-border-hover: rgba(255, 255, 255, 0.1);
  --dz-overlay: rgba(0, 0, 0, 0.6);

  --dz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --dz-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --dz-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
  --dz-shadow-card:
    0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.3);

  --dz-code-bg: var(--brand-code-bg-dark);
  --dz-code-text: var(--brand-code-text-dark);

  /* ── Badge / status colors (tuned for contrast on dark bg) ─── */
  --dz-badge-success-bg: rgba(34, 197, 94, 0.15);
  --dz-badge-success-text: #4ade80;
  --dz-badge-warning-bg: rgba(234, 179, 8, 0.15);
  --dz-badge-warning-text: #fbbf24;
  --dz-badge-error-bg: rgba(239, 68, 68, 0.15);
  --dz-badge-error-text: #f87171;
  --dz-badge-info-bg: rgba(59, 130, 246, 0.15);
  --dz-badge-info-text: #60a5fa;
  --dz-badge-purple-bg: var(--dz-ai-subtle);
  --dz-badge-purple-text: var(--dz-ai);
  --dz-badge-teal-bg: rgba(20, 184, 166, 0.15);
  --dz-badge-teal-text: #2dd4bf;
  --dz-badge-amber-bg: rgba(245, 158, 11, 0.15);
  --dz-badge-amber-text: #fbbf24;
  --dz-badge-muted-bg: var(--dz-bg-secondary);
  --dz-badge-muted-text: var(--dz-text-muted);

  /* ── Compat aliases (shadcn-style shorthand) ─────────────────── */
  --dz-background: var(--dz-bg-primary);
  --dz-foreground: var(--dz-text-primary);
  --dz-muted-foreground: var(--dz-text-muted);
  --dz-secondary: var(--dz-bg-secondary);
  --dz-secondary-foreground: var(--dz-text-secondary);
  --dz-destructive: var(--dz-error);

  color-scheme: dark;
}

/* ── Font preferences ─────────────────────────────────────────── */
[data-font="newsreader"] {
  --brand-font-sans: var(--brand-font-serif);
}
[data-font="readable"] {
  --brand-font-sans: "Lexend", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.01em;
}
[data-font="dyslexic"] {
  --brand-font-sans:
    "OpenDyslexic", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.03em;
  word-spacing: 0.12em;
}

/* ════════════════════════════════════════════════════════════════════
   Heritage skin — admin-gated "old money" remap.

   Warm paper, ink text, a single deep "house" colour + muted heritage
   semantics. Remaps the existing --dz-* and shadcn HSL tokens so the
   whole app follows; layout/spacing are unchanged.

   Activated by data-skin="heritage" on <html>, with the house chosen via
   data-house="navy|forest|oxblood|charcoal". Selectors are scoped by
   data-theme so they out-specify the base light/dark token blocks.
   ════════════════════════════════════════════════════════════════════ */

/* ── Shared paper / ink / semantics — daylight ── */
[data-theme="light"][data-skin="heritage"] {
  --dz-bg-page: #f5f1e8;
  --dz-bg-primary: #fffdf7;
  --dz-bg-secondary: #efe9db;
  --dz-bg-tertiary: #e6dfcd;
  --dz-bg-elevated: #fffdf7;
  --dz-bg-card: var(--dz-bg-primary);
  --dz-bg-hover: #e6dfcd;
  --dz-bg-active: #ddd4be;

  --dz-text-primary: #1b2433;
  --dz-text-secondary: #4b5468;
  --dz-text-muted: #8a8472;
  --dz-text-tertiary: #a9a290;
  --dz-text-faint: #b8b1a0;

  --dz-accent-fg: #f7f3e9;
  --dz-accent-faint: color-mix(in srgb, var(--dz-accent) 5%, transparent);
  --dz-accent-subtle: color-mix(in srgb, var(--dz-accent) 10%, transparent);
  --dz-accent-soft: color-mix(in srgb, var(--dz-accent) 8%, transparent);
  --dz-accent-light: color-mix(in srgb, var(--dz-accent) 12%, transparent);
  --dz-accent-medium: color-mix(in srgb, var(--dz-accent) 16%, transparent);
  --dz-accent-glow: color-mix(in srgb, var(--dz-accent) 22%, transparent);
  --dz-accent-emphasis: color-mix(in srgb, var(--dz-accent) 30%, transparent);
  --brand-accent: var(--dz-accent);
  --brand-accent-hover: var(--dz-accent-hover);

  /* AI accents follow the active house under heritage. */
  --dz-ai: var(--dz-accent);
  --dz-ai-strong: var(--dz-accent-hover);

  --dz-success: #3f6b4f;
  --dz-success-bg: #e7eee4;
  --dz-warning: #9a6a2a;
  --dz-warning-bg: #f1e8d6;
  --dz-warning-fg: #f7f3e9;
  --dz-error: #8f3a36;
  --dz-error-bg: #f1e3df;
  --dz-info: #3a5573;
  --dz-info-bg: #e7ebf1;

  /* Chart series — house, brass, sage, brick, ochre, slate. */
  --dz-chart-1: var(--dz-accent);
  --dz-chart-2: #9c7a3c;
  --dz-chart-3: #3f6b4f;
  --dz-chart-4: #8f3a36;
  --dz-chart-5: #9a6a2a;
  --dz-chart-6: #3a5573;

  --dz-border: #d8cfba;
  --dz-border-subtle: #e6ddc9;
  --dz-border-hover: #c6bca3;
  --dz-overlay: rgba(43, 34, 18, 0.46);

  --dz-shadow-sm: 0 1px 2px rgba(60, 48, 24, 0.05);
  --dz-shadow-md: 0 2px 10px rgba(60, 48, 24, 0.06);
  --dz-shadow-lg: 0 10px 28px rgba(60, 48, 24, 0.1);
  --dz-shadow-xl: 0 16px 44px rgba(60, 48, 24, 0.16);
  --dz-shadow-card:
    0 0 0 1px rgba(60, 48, 24, 0.06), 0 4px 20px rgba(60, 48, 24, 0.07);

  /* shadcn surfaces */
  --background: 41 40% 94%;
  --foreground: 218 31% 15%;
  --card: 48 60% 98%;
  --card-foreground: 218 31% 15%;
  --popover: 48 60% 98%;
  --popover-foreground: 218 31% 15%;
  --secondary: 42 30% 89%;
  --secondary-foreground: 218 31% 15%;
  --muted: 42 30% 89%;
  --muted-foreground: 41 10% 49%;
  --accent: 42 30% 89%;
  --accent-foreground: 218 31% 15%;
  --border: 40 28% 80%;
  --input: 40 28% 80%;
  --primary-foreground: 44 50% 96%;
}

/* ── Shared paper / ink / semantics — study (dark) ── */
[data-theme="dark"][data-skin="heritage"] {
  --dz-bg-page: #14171c;
  --dz-bg-primary: #1b1f26;
  --dz-bg-secondary: #232831;
  --dz-bg-tertiary: #2c323d;
  --dz-bg-elevated: #1b1f26;
  --dz-bg-card: var(--dz-bg-primary);
  --dz-bg-hover: #2c323d;
  --dz-bg-active: #353c49;

  --dz-text-primary: #ece5d3;
  --dz-text-secondary: #b3ad9c;
  --dz-text-muted: #837d6e;
  --dz-text-tertiary: #6c675b;
  --dz-text-faint: #5b5750;

  --dz-accent-fg: #14171c;
  --dz-accent-faint: color-mix(in srgb, var(--dz-accent) 8%, transparent);
  --dz-accent-subtle: color-mix(in srgb, var(--dz-accent) 16%, transparent);
  --dz-accent-soft: color-mix(in srgb, var(--dz-accent) 12%, transparent);
  --dz-accent-light: color-mix(in srgb, var(--dz-accent) 18%, transparent);
  --dz-accent-medium: color-mix(in srgb, var(--dz-accent) 24%, transparent);
  --dz-accent-glow: color-mix(in srgb, var(--dz-accent) 30%, transparent);
  --dz-accent-emphasis: color-mix(in srgb, var(--dz-accent) 36%, transparent);
  --brand-accent: var(--dz-accent);
  --brand-accent-hover: var(--dz-accent-hover);

  /* AI accents follow the active house under heritage. */
  --dz-ai: var(--dz-accent);
  --dz-ai-strong: var(--dz-accent-hover);

  --dz-success: #7fa07f;
  --dz-success-bg: rgba(127, 160, 127, 0.16);
  --dz-warning: #c2a05c;
  --dz-warning-bg: rgba(194, 160, 92, 0.16);
  --dz-warning-fg: #14171c;
  --dz-error: #c08079;
  --dz-error-bg: rgba(192, 128, 121, 0.16);
  --dz-info: #6f93c0;
  --dz-info-bg: rgba(111, 147, 192, 0.16);

  /* Chart series — lighter accents for contrast on the study (dark) paper. */
  --dz-chart-1: var(--dz-accent);
  --dz-chart-2: #c2a05c;
  --dz-chart-3: #7fa07f;
  --dz-chart-4: #c08079;
  --dz-chart-5: #d8b36a;
  --dz-chart-6: #6f93c0;

  --dz-border: rgba(214, 201, 170, 0.12);
  --dz-border-subtle: rgba(214, 201, 170, 0.08);
  --dz-border-hover: rgba(214, 201, 170, 0.22);
  --dz-overlay: rgba(0, 0, 0, 0.62);

  --background: 220 22% 9%;
  --foreground: 44 35% 88%;
  --card: 222 17% 13%;
  --card-foreground: 44 35% 88%;
  --popover: 222 17% 13%;
  --popover-foreground: 44 35% 88%;
  --secondary: 220 16% 17%;
  --secondary-foreground: 44 35% 88%;
  --muted: 220 16% 17%;
  --muted-foreground: 41 9% 47%;
  --accent: 220 16% 17%;
  --accent-foreground: 44 35% 88%;
  --border: 40 10% 24%;
  --input: 40 10% 24%;
  --primary-foreground: 220 25% 10%;
}

/* ── House colour — daylight (deep tones, cream text) ── */
[data-theme="light"][data-skin="heritage"][data-house="navy"] {
  --dz-accent: #1f3a5f;
  --dz-accent-hover: #16293f;
  --primary: 213 51% 25%;
  --ring: 213 51% 25%;
}
[data-theme="light"][data-skin="heritage"][data-house="forest"] {
  --dz-accent: #2f4a39;
  --dz-accent-hover: #213729;
  --primary: 142 22% 24%;
  --ring: 142 22% 24%;
}
[data-theme="light"][data-skin="heritage"][data-house="oxblood"] {
  --dz-accent: #6e2b2b;
  --dz-accent-hover: #531f1f;
  --primary: 0 44% 30%;
  --ring: 0 44% 30%;
}
[data-theme="light"][data-skin="heritage"][data-house="charcoal"] {
  --dz-accent: #34383d;
  --dz-accent-hover: #24272b;
  --primary: 213 8% 22%;
  --ring: 213 8% 22%;
}
/* Amethyst keeps the classic DayZero violet inside the heritage shell, so
   the original "Ask AI" colours live on as a selectable house. */
[data-theme="light"][data-skin="heritage"][data-house="amethyst"] {
  --dz-accent: #7c3aed;
  --dz-accent-hover: #6d28d9;
  --primary: 262 83% 58%;
  --ring: 262 83% 58%;
}

/* ── House colour — study (lighter accents for dark contrast) ── */
[data-theme="dark"][data-skin="heritage"][data-house="navy"] {
  --dz-accent: #6f93c0;
  --dz-accent-hover: #88a6cd;
  --primary: 213 40% 59%;
  --ring: 213 40% 59%;
}
[data-theme="dark"][data-skin="heritage"][data-house="forest"] {
  --dz-accent: #7ba081;
  --dz-accent-hover: #93b298;
  --primary: 135 18% 56%;
  --ring: 135 18% 56%;
}
[data-theme="dark"][data-skin="heritage"][data-house="oxblood"] {
  --dz-accent: #c08079;
  --dz-accent-hover: #cd958f;
  --primary: 8 38% 61%;
  --ring: 8 38% 61%;
}
[data-theme="dark"][data-skin="heritage"][data-house="charcoal"] {
  --dz-accent: #b9b3a3;
  --dz-accent-hover: #c8c3b6;
  --primary: 44 12% 68%;
  --ring: 44 12% 68%;
}
[data-theme="dark"][data-skin="heritage"][data-house="amethyst"] {
  --dz-accent: #a78bfa;
  --dz-accent-hover: #b9a3fb;
  --primary: 255 92% 76%;
  --ring: 255 92% 76%;
}

/* ════════════════════════════════════════════════════════════════════
   House colour on the default ("Ice") skin.

   The house picker is available on the standard skin too: picking a house
   retints the accent family (accent, AI, brand-accent, shadcn primary/ring)
   without the heritage paper remap. Amethyst is the stock DayZero violet, so
   it deliberately has NO override here and falls through to the base tokens
   unchanged — keeping the default look identical for anyone who never picks a
   house. The other houses are scoped with :not([data-skin="heritage"]) so the
   heritage blocks above always win whenever that skin is active.
   ════════════════════════════════════════════════════════════════════ */
:root[data-house="navy"]:not([data-skin="heritage"]),
:root[data-house="forest"]:not([data-skin="heritage"]),
:root[data-house="oxblood"]:not([data-skin="heritage"]),
:root[data-house="charcoal"]:not([data-skin="heritage"]) {
  --dz-accent-faint: color-mix(in srgb, var(--dz-accent) 6%, transparent);
  --dz-accent-subtle: color-mix(in srgb, var(--dz-accent) 12%, transparent);
  --dz-accent-soft: color-mix(in srgb, var(--dz-accent) 9%, transparent);
  --dz-accent-light: color-mix(in srgb, var(--dz-accent) 14%, transparent);
  --dz-accent-medium: color-mix(in srgb, var(--dz-accent) 18%, transparent);
  --dz-accent-glow: color-mix(in srgb, var(--dz-accent) 24%, transparent);
  --dz-accent-emphasis: color-mix(in srgb, var(--dz-accent) 32%, transparent);
  --brand-accent: var(--dz-accent);
  --brand-accent-hover: var(--dz-accent-hover);
  --dz-ai: var(--dz-accent);
  --dz-ai-strong: var(--dz-accent-hover);
}

/* Daylight house accents (deep tones). */
:root[data-theme="light"][data-house="navy"]:not([data-skin="heritage"]) {
  --dz-accent: #1f3a5f;
  --dz-accent-hover: #16293f;
  --primary: 213 51% 25%;
  --ring: 213 51% 25%;
}
:root[data-theme="light"][data-house="forest"]:not([data-skin="heritage"]) {
  --dz-accent: #2f4a39;
  --dz-accent-hover: #213729;
  --primary: 142 22% 24%;
  --ring: 142 22% 24%;
}
:root[data-theme="light"][data-house="oxblood"]:not([data-skin="heritage"]) {
  --dz-accent: #6e2b2b;
  --dz-accent-hover: #531f1f;
  --primary: 0 44% 30%;
  --ring: 0 44% 30%;
}
:root[data-theme="light"][data-house="charcoal"]:not([data-skin="heritage"]) {
  --dz-accent: #34383d;
  --dz-accent-hover: #24272b;
  --primary: 213 8% 22%;
  --ring: 213 8% 22%;
}

/* Study (dark) house accents (lighter for contrast). */
:root[data-theme="dark"][data-house="navy"]:not([data-skin="heritage"]) {
  --dz-accent: #6f93c0;
  --dz-accent-hover: #88a6cd;
  --primary: 213 40% 59%;
  --ring: 213 40% 59%;
}
:root[data-theme="dark"][data-house="forest"]:not([data-skin="heritage"]) {
  --dz-accent: #7ba081;
  --dz-accent-hover: #93b298;
  --primary: 135 18% 56%;
  --ring: 135 18% 56%;
}
:root[data-theme="dark"][data-house="oxblood"]:not([data-skin="heritage"]) {
  --dz-accent: #c08079;
  --dz-accent-hover: #cd958f;
  --primary: 8 38% 61%;
  --ring: 8 38% 61%;
}
:root[data-theme="dark"][data-house="charcoal"]:not([data-skin="heritage"]) {
  --dz-accent: #b9b3a3;
  --dz-accent-hover: #c8c3b6;
  --primary: 44 12% 68%;
  --ring: 44 12% 68%;
}

/* ── Shared keyframes ─────────────────────────────────────────── */
@keyframes dz-ping {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}
@keyframes dz-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.15;
  }
}
@keyframes dz-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dz-ping {
  animation: dz-ping 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dz-pulse {
  animation: dz-pulse 2s ease-in-out infinite;
}
.dz-fade-in {
  animation: dz-fade-in 300ms ease-out;
}

@import "./color-blind.css";