/*
 * 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)
 *
 * Theme selectors: :root / [data-theme="light"] = light,
 *                  .dark / [data-theme="dark"]  = dark.
 *
 * Font selectors:  [data-font="readable"]  = Lexend
 *                  [data-font="dyslexic"]  = OpenDyslexic
 *
 * localStorage keys: dz-pref-theme ("light" | "dark"), dz-pref-font ("default" | "readable" | "dyslexic")
 */

@import './brand.css';

/* ── Light theme ──────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --dz-bg-page: #ffffff;
  --dz-bg-primary: #ffffff;
  --dz-bg-secondary: var(--brand-gray-100);
  --dz-bg-tertiary: var(--brand-gray-200);
  --dz-bg-elevated: #f8f8fa;
  --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: #ffffff;
  --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);

  --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-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(--brand-cb-positive);
  --dz-cb-negative: var(--brand-cb-negative);

  --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: #faf5ff;
  --dz-badge-purple-text: #7e22ce;
  --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-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);

  --dz-accent: var(--brand-accent);
  --dz-accent-hover: var(--brand-accent-hover);
  --dz-accent-fg: #ffffff;
  --dz-accent-glow: var(--brand-accent-glow-dark);

  --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-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(--brand-cb-positive-dark);
  --dz-cb-negative: var(--brand-cb-negative-dark);

  --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: rgba(168, 85, 247, 0.15);
  --dz-badge-purple-text: #c084fc;
  --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="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;
}

/* ── 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; }