/* DedwenAI flagship semantic tokens.
   Loaded after the legacy sheet so every surface resolves to one intentional
   Black / Graphite / Gray / Red system while bounded migrations continue. */
:root {
  color-scheme: dark;

  --color-black: #050506;
  --color-ink: #09090b;
  --color-graphite-950: #0d0d10;
  --color-graphite-900: #121216;
  --color-graphite-800: #18181d;
  --color-graphite-700: #23232a;
  --color-graphite-600: #303038;
  --color-gray-600: #686872;
  --color-gray-500: #85858f;
  --color-gray-400: #a1a1aa;
  --color-gray-300: #c7c7ce;
  --color-gray-200: #e4e4e7;
  --color-white: #fafafa;

  /* Brand accent: black + gray + red — a restrained, premium garnet-red, not
     a flooded neon red. --color-status-* below are intentionally NOT
     derived from this accent, so operational health status never gets
     mistaken for branding. (Relocated 2026-08-26 from app.css, which
     redeclared --accent/--mercury/etc. with different literal values that
     this file's load order already silently overrode on every page that
     loads both — see the file-level comment above and
     DEDWENAI_FLAGSHIP_UI_UX_REBUILD_WORKLOG.md Finding A / "Token
     architecture unification" for the full audit trail.) */
  --color-brand-red: #e11d36;
  --color-brand-red-hover: #f02d47;
  --color-brand-red-active: #c8142c;
  --color-brand-red-soft: rgba(225, 29, 54, 0.14);
  --color-brand-red-glow: rgba(225, 29, 54, 0.34);

  --color-status-success: #44d18d;
  --color-status-warning: #f5b942;
  --color-status-info: #5ab4ff;
  --color-status-danger: #ff6274;
  --color-status-neutral: #85858f;

  --color-success-soft: rgba(68, 209, 141, 0.12);
  --color-warning-soft: rgba(245, 185, 66, 0.12);
  --color-info-soft: rgba(90, 180, 255, 0.12);
  --color-danger-soft: rgba(255, 98, 116, 0.12);

  --surface-canvas: var(--color-black);
  --surface-shell: var(--color-ink);
  --surface-panel: rgba(18, 18, 22, 0.94);
  --surface-card: rgba(24, 24, 29, 0.92);
  --surface-raised: rgba(35, 35, 42, 0.94);
  --surface-hovered: rgba(48, 48, 56, 0.84);
  --surface-scrim: rgba(5, 5, 6, 0.76);
  --line-subtle: rgba(250, 250, 250, 0.075);
  --line-default: rgba(250, 250, 250, 0.12);
  --line-strong: rgba(250, 250, 250, 0.2);
  --line-brand: rgba(225, 29, 54, 0.42);

  --content-primary: var(--color-white);
  --content-secondary: var(--color-gray-300);
  --content-muted: var(--color-gray-400);
  --content-faint: var(--color-gray-600);
  --content-on-brand: #ffffff;

  --font-ui: "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --font-display: "Instrument Serif", Georgia, serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-panel: 22px;
  --radius-pill: 999px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ring-focus: 0 0 0 2px var(--color-black), 0 0 0 4px var(--color-brand-red);
  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.32);
  --shadow-panel: 0 28px 72px rgba(0, 0, 0, 0.52);

  /* Canonical component-facing contract. These names are intentionally
     boring: new surfaces should not need to know the historical palette. */
  --color-bg-root: var(--surface-canvas);
  --color-bg-surface: var(--surface-shell);
  --color-bg-elevated: var(--surface-card);
  --color-bg-hover: var(--surface-hovered);
  --color-border: var(--line-default);
  --color-border-strong: var(--line-strong);
  --color-text: var(--content-primary);
  --color-text-muted: var(--content-secondary);
  --color-text-subtle: var(--content-muted);
  --color-brand: var(--color-brand-red);
  --color-brand-strong: var(--color-brand-red-hover);
  --color-brand-glow: var(--color-brand-red-glow);
  --radius-xs: 6px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-panel);
  --duration-fast: var(--motion-fast);
  --duration-base: var(--motion-base);
  --duration-slow: var(--motion-slow);
  --ease-standard: var(--motion-standard);
  --z-sidebar: 40;
  --z-popover: 80;
  --z-dialog: 120;
  --z-toast: 160;

  /* Compatibility bridge for legacy selectors. New styles use only semantic
     names above; these aliases make older pages resolve to the same palette. */
  --bg: var(--surface-canvas);
  --bg-2: var(--surface-shell);
  --bg-base: var(--surface-canvas);
  --bg-shell: var(--surface-shell);
  --bg-surface: var(--surface-panel);
  --bg-elevated: var(--surface-card);
  --bg-overlay: var(--surface-raised);
  --surface: var(--surface-panel);
  --surface-strong: var(--surface-card);
  --surface-hover: var(--surface-hovered);
  --surface-1: var(--surface-panel);
  --surface-2: var(--surface-card);
  --surface-3: var(--surface-raised);
  --text: var(--content-primary);
  --text-primary: var(--content-primary);
  --text-soft: var(--content-secondary);
  --text-secondary: var(--content-secondary);
  --text-muted: var(--content-muted);
  --text-faint: var(--content-faint);
  --border: var(--line-subtle);
  --border-subtle: var(--line-subtle);
  --border-default: var(--line-default);
  --border-strong: var(--line-strong);
  --accent: var(--color-brand-red);
  --accent-strong: var(--color-brand-red-hover);
  --accent-soft: var(--color-brand-red-soft);
  --accent-glow: var(--color-brand-red-glow);
  --amber: var(--color-brand-red);
  --amber-hover: var(--color-brand-red-hover);
  --amber-active: var(--color-brand-red-active);
  --amber-translucent: var(--color-brand-red-soft);
  --gold: var(--color-brand-red-hover);
  --gold-base: var(--color-brand-red);
  --gold-bright: var(--color-brand-red-hover);
  --gold-muted: var(--color-brand-red-soft);
  --gold-surface: var(--color-brand-red-soft);
  --wine: var(--color-gray-500);
  --wine-tint: rgba(133, 133, 143, 0.14);
  /* Secondary accent (e.g. Sovereign tier): neutral gray, not a fourth hue —
     keeps the palette to exactly black + gray + red. (Relocated 2026-08-26,
     see the --color-brand-red comment above.) */
  --mercury: var(--color-gray-500);
  --mercury-soft: rgba(133, 133, 143, 0.14);
  --success: var(--color-status-success);
  --warning: var(--color-status-warning);
  --info: var(--color-status-info);
  --danger: var(--color-status-danger);
  --green: var(--color-status-success);
  --blue: var(--color-status-info);
  --red: var(--color-status-danger);
  --neutral: var(--color-status-neutral);
  --focus-ring: var(--ring-focus);
  --font-sans: var(--font-ui);
  --font-mono: var(--font-code);
  --font-serif: var(--font-display);
}