/**
 * Cognifiy design tokens — Prompt 12 master layer.
 * Canonical names follow the product spec. --cg-* aliases keep existing CSS working.
 */

:root {
  /* —— Surfaces —— */
  --bg-app: #F7F8FC;
  --bg-subtle: #F3F4F8;
  --surface-primary: #FFFFFF;
  --surface-secondary: #FAFAFC;
  --surface-elevated: #FFFFFF;
  --surface-hover: #F8F8FB;
  --surface-active: #F2F1FF;

  /* —— Text —— */
  --text-primary: #17181C;
  --text-secondary: #686C78;
  --text-tertiary: #5E6270;
  --text-disabled: #B6B8C1;
  --text-on-primary: #FFFFFF;

  /* —— Borders —— */
  --border-subtle: #ECEEF3;
  --border-default: #E2E5EC;
  --border-strong: #D4D7E0;
  --border-interactive-hover: #DADCED;

  /* —— Primary —— */
  --primary: #5B5CE2;
  --primary-hover: #5051D6;
  --primary-active: #4748C8;
  --primary-soft: #EEEEFF;
  --primary-soft-hover: #E7E7FF;

  /* —— AI accent —— */
  --ai: #8068F5;
  --ai-soft: #F1EDFF;

  /* —— Semantic —— */
  --success: #27A36A;
  --success-soft: #EAF7F1;
  --warning: #E69A2B;
  --warning-soft: #FFF5E5;
  --danger: #D94F4F;
  --danger-soft: #FDECEC;
  --info: #4C7DE7;
  --info-soft: #EDF3FF;
  --neutral: #A4A7B2;

  /* —— Chart palette —— */
  --chart-primary: #5B5CE2;
  --chart-secondary: #8068F5;
  --chart-blue: #4C7DE7;
  --chart-success: #27A36A;
  --chart-warning: #E69A2B;
  --chart-neutral: #A4A7B2;
  --chart-axis: #8B8F9B;
  --chart-grid: rgba(120, 125, 145, 0.12);
  --chart-grid-minor: rgba(120, 125, 145, 0.06);
  --chart-line-width: 2.5px;

  /* —— Overlay / focus —— */
  --overlay: rgba(13, 14, 20, 0.42);
  --focus-ring: rgba(91, 92, 226, 0.45);
  --focus-ring-soft: rgba(91, 92, 226, 0.10);
  --selection: rgba(91, 92, 226, 0.18);

  /* —— Shadows (restrained; most surfaces use borders) —— */
  --shadow-none: none;
  --shadow-elevated: 0 4px 16px rgba(20, 22, 35, 0.05);
  --shadow-dropdown: 0 12px 32px rgba(20, 22, 35, 0.12);
  --shadow-modal: 0 24px 60px rgba(20, 22, 35, 0.18);
  --shadow-primary-hover: 0 4px 12px rgba(91, 92, 226, 0.18);

  /* —— Radius —— */
  --radius-control: 8px;
  --radius-sm: 8px;
  --radius-dropdown: 10px;
  --radius-card: 12px;
  --radius-card-lg: 14px;
  --radius-modal: 16px;
  --radius-sheet: 18px;
  --radius-badge: 6px;
  --radius-pill: 999px;

  /* —— Spacing scale —— */
  --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;
  --space-16: 64px;

  /* —— Layout —— */
  --page-pad: 32px;
  --page-pad-y: 28px;
  --content-max: 1240px;
  --content-dashboard: 1220px;
  --content-readiness: 1080px;
  --content-form: 760px;
  --content-workspace: 1400px;
  --content-diagnostic: 820px;
  --content-onboarding: 780px;
  --content-auth: 420px;
  --sidebar-width: 240px;
  --drawer-width: 440px;
  --coach-width: 330px;
  --stage-rail-width: 200px;
  --mobile-nav-height: 66px;
  --topbar-height: 56px;

  /* —— Typography —— */
  --font: "Geist Variable", "Geist Sans", Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 30px;
  --font-4xl: 38px;

  /* —— Motion —— */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 220ms;
  --motion-panel: 180ms;
  --motion-learn: 280ms;

  /* —— Z-index —— */
  --z-base: 0;
  --z-sticky: 20;
  --z-dropdown: 100;
  --z-bottom-nav: 150;
  --z-drawer-overlay: 300;
  --z-drawer: 320;
  --z-modal-overlay: 400;
  --z-modal: 420;
  --z-toast: 500;
  --z-tooltip: 600;

  /* —— Breakpoints (documentation; media queries stay numeric) —— */
  --bp-xl: 1280px;
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 640px;

  /* —— Brand gradient (accents only) —— */
  --gradient-brand: linear-gradient(135deg, #5B5CE2 0%, #7462EA 55%, #8068F5 100%);
  --glow-app: radial-gradient(circle at 70% -10%, rgba(91, 92, 226, 0.05), transparent 35%);

  /* —— Control sizes —— */
  --control-height: 40px;
  --control-height-lg: 44px;
  --control-height-sm: 34px;
  --input-height: 42px;

  /* ============================================================
     Compatibility aliases (--cg-* and legacy page tokens)
     ============================================================ */
  --cg-bg: var(--bg-app);
  --cg-surface: var(--surface-primary);
  --cg-surface-secondary: var(--surface-secondary);
  --cg-surface-hover: var(--surface-hover);
  --cg-text: var(--text-primary);
  --cg-text-secondary: var(--text-secondary);
  --cg-text-muted: var(--text-tertiary);
  --cg-border: var(--border-default);
  --cg-border-subtle: var(--border-subtle);
  --cg-border-strong: var(--border-strong);
  --cg-primary: var(--primary);
  --cg-primary-hover: var(--primary-hover);
  --cg-primary-pressed: var(--primary-active);
  --cg-primary-light: var(--primary-soft);
  --cg-ai: var(--ai);
  --cg-ai-soft: var(--ai-soft);
  --cg-ai-gradient: var(--gradient-brand);
  --cg-success: var(--success);
  --cg-success-light: var(--success-soft);
  --cg-warning: var(--warning);
  --cg-warning-light: var(--warning-soft);
  --cg-danger: var(--danger);
  --cg-danger-light: var(--danger-soft);
  --cg-overlay: var(--overlay);
  --cg-focus-ring: var(--focus-ring-soft);
  --cg-shadow-sm: var(--shadow-none);
  --cg-shadow-md: var(--shadow-elevated);
  --cg-shadow-lg: var(--shadow-modal);
  --cg-radius-chip: var(--radius-badge);
  --cg-radius-btn: var(--radius-control);
  --cg-radius-input: var(--radius-control);
  --cg-radius-card: var(--radius-card);
  --cg-radius-card-lg: var(--radius-card-lg);
  --cg-radius-modal: var(--radius-modal);
  --cg-space-1: var(--space-1);
  --cg-space-2: var(--space-2);
  --cg-space-3: var(--space-3);
  --cg-space-4: var(--space-4);
  --cg-space-5: var(--space-5);
  --cg-space-6: var(--space-6);
  --cg-space-8: var(--space-8);
  --cg-space-10: var(--space-10);
  --cg-space-12: var(--space-12);
  --cg-space-16: var(--space-16);
  --cg-page-pad: var(--page-pad);
  --cg-content-max: var(--content-max);
  --cg-sidebar-width: var(--sidebar-width);
  --cg-topbar-height: var(--topbar-height);
  --cg-mobile-nav-height: var(--mobile-nav-height);
  --cg-font: var(--font);
  --cg-font-mono: var(--font-mono);
  --cg-ease: var(--ease);
  --cg-duration-micro: var(--motion-fast);
  --cg-duration: var(--motion-base);
  --cg-duration-large: var(--motion-slow);
  --cg-duration-learn: var(--motion-learn);

  --bg: var(--bg-app);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--primary);
  --blue-dark: var(--primary-hover);
  --blue-soft: var(--primary-soft);
  --border: var(--border-default);
  --shadow: var(--shadow-elevated);
  --shadow2: var(--shadow-none);
  --radius: var(--radius-card);
  --radius2: var(--radius-card-lg);
  --container: 1120px;
  --ok: var(--success);
  --bad: var(--danger);
}

[data-theme="dark"] {
  --bg-app: #111217;
  --bg-subtle: #15161C;
  --surface-primary: #191A21;
  --surface-secondary: #1D1E26;
  --surface-elevated: #22232C;
  --surface-hover: #24252E;
  --surface-active: #29283D;

  --text-primary: #F1F2F6;
  --text-secondary: #A7AAB6;
  --text-tertiary: #777B89;
  --text-disabled: #595D68;

  --border-subtle: #262832;
  --border-default: #30323D;
  --border-strong: #3B3E4B;
  --border-interactive-hover: #45485A;

  --primary: #6E6FF0;
  --primary-hover: #7B7CF5;
  --primary-active: #5B5CE2;
  --primary-soft: rgba(91, 92, 226, 0.14);
  --primary-soft-hover: rgba(91, 92, 226, 0.20);

  --ai: #9B86FF;
  --ai-soft: rgba(128, 104, 245, 0.16);

  --success: #3BBF80;
  --success-soft: rgba(39, 163, 106, 0.16);
  --warning: #F0B045;
  --warning-soft: rgba(230, 154, 43, 0.16);
  --danger: #EF6B6B;
  --danger-soft: rgba(217, 79, 79, 0.16);
  --info: #6B93F0;
  --info-soft: rgba(76, 125, 231, 0.16);

  --chart-primary: #7778F0;
  --chart-secondary: #9B86FF;
  --chart-axis: #747986;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-grid-minor: rgba(255, 255, 255, 0.04);

  --overlay: rgba(8, 9, 12, 0.62);
  --focus-ring: rgba(110, 111, 240, 0.50);
  --focus-ring-soft: rgba(110, 111, 240, 0.16);
  --selection: rgba(110, 111, 240, 0.28);

  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.50);
  --shadow-primary-hover: 0 4px 12px rgba(110, 111, 240, 0.22);

  --glow-app: radial-gradient(circle at 70% -10%, rgba(110, 111, 240, 0.08), transparent 38%);
}

@media (max-width: 1024px) {
  :root { --page-pad: 24px; --page-pad-y: 24px; }
}

@media (max-width: 768px) {
  :root { --page-pad: 16px; --page-pad-y: 16px; }
}