/* ============================================================
   Prozone AI DESIGN TOKENS — 3-layer (W3C DTCG shape)
   primitive → semantic → component. Templates use semantic/
   component ONLY, never a raw hex. Per-client re-theme = swap
   the PRIMITIVE accent ramp (tokens/client-*.css). Dark mode =
   orthogonal [data-theme] axis. Full rationale + citations:
   docs/2026-07-12-design-system-research.md + docs/DESIGN-SPEC.md
   ============================================================ */

/* ---------- PRIMITIVE: raw palette, no meaning ---------- */
:root {
  /* Neutral — cool SLATE (blue-tinted): reads technical, not consumer */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  /* Accent — desaturated cold slate-blue. SWAP THIS RAMP per client. */
  --color-accent-100: #e6eef6;
  --color-accent-200: #c6d8e9;
  --color-accent-400: #5b84ad;
  --color-accent-500: #2f5f8f;
  --color-accent-600: #254c73;
  --color-accent-700: #1c3a59;
  /* dark-mode accent variants (desaturated + lightened for dark surfaces) */
  --color-accent-d-default: #6f9cc4;
  --color-accent-d-hover:   #8bb0d1;
  --color-accent-d-active:  #4f7da3;
  --color-accent-d-tint:    #182838;

  /* Semantic primitives (desaturated ~15-20% vs marketing saturation) */
  --color-success-100: #e3f1ea; --color-success-600: #2f7d52; --color-success-700: #235e3e;
  --color-warning-100: #f6ecda; --color-warning-600: #b0741d; --color-warning-700: #875916;
  --color-danger-100:  #f6e1de; --color-danger-600:  #b0382c; --color-danger-700:  #862b21;

  /* Categorical speaker palette — dark enough for white G-number text (12) */
  --color-cat-1: #4a72a3;  /* slate-blue */
  --color-cat-2: #42745f;  /* muted teal-green */
  --color-cat-3: #80662f;  /* muted ochre */
  --color-cat-4: #7a6aa0;  /* muted violet */
  --color-cat-5: #8f5664;  /* muted rose */
  --color-cat-6: #4d707a;  /* muted steel-cyan */
  --color-cat-7: #8a5a44;  /* umber */
  --color-cat-8: #347683;  /* deep teal */
  --color-cat-9: #66783b;  /* olive */
  --color-cat-10: #87516f; /* plum */
  --color-cat-11: #526b96; /* indigo-slate */
  --color-cat-12: #765486; /* grape */

  /* Spacing — 8px grid + 4px half-step */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radius — small, present, never pill */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;

  /* Type — system stack (air-gap: zero network) */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px;
  --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px;
  --fw-normal: 400;
  --fw-regular: 400;   /* alias used by app.css; kept so the reference resolves */ --fw-medium: 500; --fw-semibold: 600;
  --lh-tight: 1.3; --lh-normal: 1.5;

  /* Motion — restrained feedback, never decorative movement. */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Elevation — static surfaces lean on hairline borders (DESIGN-SPEC), so the
     panel shadow is a whisper, not a float. --shadow-elevated stays for genuinely
     floating elements (dropdowns, popovers) via --shadow-float. */
  --shadow-elevated: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-none: none;

  /* App sidebar — brand chrome. LIGHT defaults live here; they re-point for the
     dark rail under [data-theme="dark"] below. Theme-INVARIANT: --sidebar-w plus
     --brand-plate (the fixed white plate the colour logo always rides — same trick
     as the login page, so the transparent-PNG mark stays legible on either rail). */
  --sidebar-w: 280px;
  --brand-plate: #ffffff;  /* fixed white plate behind the colour logo, both themes */
  --brand-navy: #122543;   /* the ProzoneAI logo navy (sampled), for on-white brand text */
  --sidebar-bg: #ffffff;
  --sidebar-border: var(--color-slate-200);
  --sidebar-text: var(--color-slate-600);
  --sidebar-text-strong: var(--color-slate-900);
  --sidebar-text-muted: var(--color-slate-500);
  --sidebar-hover-bg: var(--color-slate-100);
  --sidebar-active-bg: var(--color-accent-100);
  --sidebar-active-text: var(--color-accent-700);
  --sidebar-active-border: var(--color-accent-200);
  --sidebar-accent: var(--color-accent-500);
  --sidebar-card-bg: var(--color-slate-50);
}

/* ---------- SEMANTIC: meaning + theme-aware ---------- */
:root, [data-theme="light"] {
  --bg-app: var(--color-slate-50);
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-subtle: var(--color-slate-100);
  --bg-hover: var(--color-slate-100);

  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-600);
  --text-muted: var(--color-slate-500);   /* slate-400 fails WCAG on white (2.6:1); 500 = 5.9:1 */
  --text-on-accent: #ffffff;

  --border-default: var(--color-slate-200);
  --border-strong: var(--color-slate-300);

  --accent-default: var(--color-accent-500);
  --accent-hover: var(--color-accent-600);
  --accent-active: var(--color-accent-700);
  --accent-tint: var(--color-accent-100);
  --accent-tint-border: var(--color-accent-200);
  /* Accent used as TEXT. Not the same as --accent-active: on the dark canvas that one
     is a fill colour and only reaches 3.3:1 as type. The sidebar already hand-rolled
     this pairing (--sidebar-active-text); this is it, promoted to the semantic layer. */
  --accent-text: var(--color-accent-700);

  --status-success-bg: var(--color-success-100); --status-success-text: var(--color-success-700);
  --status-warning-bg: var(--color-warning-100); --status-warning-text: var(--color-warning-700);
  --status-danger-bg:  var(--color-danger-100);  --status-danger-text:  var(--color-danger-700);
  --status-info-bg:    var(--color-accent-100);  --status-info-text:    var(--color-accent-700);

  --focus-ring: var(--color-accent-600);
  --shadow-float: var(--shadow-elevated);
  --shadow-panel-current: var(--shadow-panel);

  /* Dimming behind modals and the guided-tour spotlight. One token so the two never
     drift apart; before this the dialog backdrop carried the only raw colour outside
     this file. */
  --overlay-scrim: rgba(15, 23, 42, 0.40);
}

[data-theme="dark"] {
  --bg-app: var(--color-slate-950);
  --bg-surface: var(--color-slate-900);
  --bg-surface-raised: var(--color-slate-800);   /* elevation via lightness, not shadow */
  --bg-subtle: var(--color-slate-800);
  --bg-hover: var(--color-slate-800);

  --text-primary: var(--color-slate-50);
  --text-secondary: var(--color-slate-200);  /* brighter on dark blue: reads white, not muddy gray */
  --text-muted: var(--color-slate-300);      /* lifted from slate-400 for readability on the blue canvas */
  --text-on-accent: #ffffff;

  --border-default: var(--color-slate-700);
  --border-strong: var(--color-slate-600);

  --accent-default: var(--color-accent-d-default);
  --accent-hover: var(--color-accent-d-hover);
  --accent-active: var(--color-accent-d-active);
  --accent-tint: var(--color-accent-d-tint);
  --accent-tint-border: var(--color-slate-700);
  --accent-text: var(--color-accent-d-hover);   /* 6.4:1 on the raised dark surface */

  --status-success-bg: #16321f; --status-success-text: #63b183;
  --status-warning-bg: #322512; --status-warning-text: #d69f56;
  --status-danger-bg:  #331b17; --status-danger-text:  #de6f5e;
  --status-info-bg:    #182838; --status-info-text:    #7ba6cc;

  --focus-ring: #8bb0d1;
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-panel-current: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);

  /* Deeper on the dark canvas: 40% over slate-950 barely reads as dimming at all. */
  --overlay-scrim: rgba(2, 6, 16, 0.62);

  /* Dark rail — the sidebar re-points to deep slate (sits as chrome above the
     slate-950 canvas). The logo keeps its white --brand-plate, so the colour mark
     stays legible; only these sidebar tokens flip, nothing else in the rail. */
  --sidebar-bg: var(--color-slate-900);
  --sidebar-border: var(--color-slate-800);
  --sidebar-text: var(--color-slate-300);
  --sidebar-text-strong: var(--color-slate-50);
  --sidebar-text-muted: var(--color-slate-400);
  --sidebar-hover-bg: var(--color-slate-800);
  --sidebar-active-bg: var(--color-accent-d-tint);
  --sidebar-active-text: var(--color-accent-d-hover);
  --sidebar-active-border: var(--color-slate-700);
  --sidebar-accent: var(--color-accent-d-default);
  --sidebar-card-bg: var(--color-slate-800);
}

/* ---------- COMPONENT: references semantic ONLY ---------- */
:root {
  --button-primary-bg: var(--accent-default);
  --button-primary-bg-hover: var(--accent-hover);
  --button-primary-text: var(--text-on-accent);
  --button-secondary-border: var(--border-strong);
  --button-secondary-text: var(--text-primary);
  --button-danger-bg: var(--color-danger-600);
  --button-danger-bg-hover: var(--color-danger-700);

  --table-row-border: var(--border-default);
  --table-header-bg: var(--bg-subtle);
  --table-row-hover: var(--bg-hover);

  --input-border: var(--border-default);
  --input-border-focus: var(--focus-ring);

  --chip-radius: var(--radius-sm);

  /* Stacking order — one scale instead of magic numbers scattered across two files.
     The guided tour is deliberately absent: it renders in a <dialog>, which the browser
     puts in the top layer above every z-index, including the review modals. */
  --z-raised: 4;          /* in-flow cards that must clear their siblings */
  --z-sticky-inline: 8;   /* sticky headers inside a page */
  --z-player: 20;         /* the persistent audio bar */
  --z-popover: 30;        /* filter and inline-edit popovers */
  --z-sidebar: 30;        /* the app rail (never overlaps a popover — different column) */
  --z-help-launcher: 40;  /* the always-present help button */
  --z-help-panel: 45;     /* the panel it opens */
  --z-toast: 50;          /* transient alerts win over everything non-modal */
}

/* Accessibility must-haves */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.tabular, td.num { font-variant-numeric: tabular-nums slashed-zero; }