/*
  PlatformCo Insurance Platform — Design Tokens
  Source of truth: docs/PlatformCo-Dev-DesignSystem-Handoff/.../tokens/**
  Profile: Benefits industry x Modern Clean Professional. Accent: Indigo.
  DO NOT hardcode hex anywhere else — reference these custom properties only.
*/

:root {
  /* ---- Brand accent (Indigo) — runtime brand layer, distinct from confidence/autonomy ---- */
  --color-accent-primary: #544FF8;
  --color-accent-primary-hover: #453fe0;
  --color-accent-primary-active: #3a35c4;
  --color-accent-primary-deep: #4038d6;
  --color-accent-primary-soft: rgba(84, 79, 248, 0.1);
  --color-accent-glow: rgba(84, 79, 248, 0.35);
  --color-accent-secondary: #7c3aed;
  --color-accent-secondary-soft: rgba(124, 58, 237, 0.1);
  --color-chrome-bg: #14142a;
  --color-chrome-bg-soft: #1a1a36;
  --color-chrome-border: rgba(240, 240, 247, 0.08);
  --color-chrome-text: #f0f0f7;
  --color-chrome-text-muted: #9898b8;

  /* ---- Neutral surface / text (light) ---- */
  --color-surface-0: #ffffff;
  --color-surface-1: #f8f8fb;
  --color-surface-2: #f0f0f7;
  --color-surface-3: #e8e8f2;
  --color-surface-4: #e0e0ec;
  --color-surface-border: #e2e2ed;
  --color-surface-border-strong: #c8c8dc;
  --color-text-primary: #14142a;
  --color-text-secondary: #4e4e70;
  --color-text-tertiary: #6b6b90;
  --color-text-disabled: #9898b8;
  --color-text-inverse: #ffffff;
  --color-text-on-accent: #ffffff;

  /* ---- Feedback (light) ---- */
  --color-feedback-success: #0d9488;
  --color-feedback-success-soft: rgba(13, 148, 136, 0.1);
  --color-feedback-warning: #d97706;
  --color-feedback-warning-soft: rgba(217, 119, 6, 0.1);
  --color-feedback-error: #dc2626;
  --color-feedback-error-soft: rgba(220, 38, 38, 0.1);
  --color-feedback-info: #2563eb;
  --color-feedback-info-soft: rgba(37, 99, 235, 0.1);

  /* ---- Confidence (distinct hues from feedback — never overridden by brand accent) ---- */
  --color-confidence-high: #0d9488;
  --color-confidence-high-bg: rgba(13, 148, 136, 0.08);
  --color-confidence-high-border: rgba(13, 148, 136, 0.2);
  --color-confidence-high-text: #0f766e;
  --color-confidence-medium: #2563eb;
  --color-confidence-medium-bg: rgba(37, 99, 235, 0.08);
  --color-confidence-medium-border: rgba(37, 99, 235, 0.2);
  --color-confidence-medium-text: #1d4ed8;
  --color-confidence-low: #d97706;
  --color-confidence-low-bg: rgba(217, 119, 6, 0.08);
  --color-confidence-low-border: rgba(217, 119, 6, 0.2);
  --color-confidence-low-text: #b45309;
  --color-confidence-unknown: var(--color-text-tertiary);

  /* ---- Autonomy (human-AI control spectrum) ---- */
  --color-autonomy-supervised: #0d9488;
  --color-autonomy-supervised-bg: rgba(13, 148, 136, 0.06);
  --color-autonomy-supervised-border: rgba(13, 148, 136, 0.2);
  --color-autonomy-supervised-text: #0f766e;
  --color-autonomy-autonomous: #6d28d9;
  --color-autonomy-autonomous-bg: rgba(109, 40, 217, 0.06);
  --color-autonomy-autonomous-border: rgba(109, 40, 217, 0.15);
  --color-autonomy-autonomous-text: #5b21b6;
  --color-autonomy-human-required: #d97706;
  --color-autonomy-human-required-bg: rgba(217, 119, 6, 0.08);
  --color-autonomy-human-required-border: rgba(217, 119, 6, 0.25);
  --color-autonomy-human-required-text: #b45309;

  /* ---- Typography ---- */
  --font-heading: "Plus Jakarta Sans", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", "Cascadia Code", monospace;

  --text-xs: 0.694rem;
  --text-sm: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;
  --text-4xl: 2.488rem;
  --text-5xl: 2.986rem;
  --text-display-sm: 3rem;
  --text-display-md: 4rem;
  --text-display-lg: 5.5rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---- Spacing (4px grid) ---- */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px;
  --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --page-x: 24px; --page-y: 32px;

  /* ---- Radius ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
  --radius-button-primary: 10px; --radius-button-secondary: 8px;
  --radius-input: 8px; --radius-card: 12px; --radius-card-inner: 8px;
  --radius-badge: 6px; --radius-dialog: 16px; --radius-tooltip: 6px; --radius-ai-card: 16px;

  /* ---- Elevation ---- */
  --shadow-elevation-1: 0 1px 3px 0 rgba(13,13,40,.08), 0 1px 2px -1px rgba(13,13,40,.05);
  --shadow-elevation-2: 0 4px 6px -1px rgba(13,13,40,.1), 0 2px 4px -2px rgba(13,13,40,.06);
  --shadow-elevation-3: 0 10px 15px -3px rgba(13,13,40,.12), 0 4px 6px -4px rgba(13,13,40,.07);
  --shadow-elevation-4: 0 20px 25px -5px rgba(13,13,40,.15), 0 8px 10px -6px rgba(13,13,40,.08);
  --shadow-glow-ai: 0 0 24px 0 rgba(84,79,248,.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.76,0,.24,1);
  --duration-fast: 150ms;
  --duration-standard: 250ms;
}

/* ---- Dark theme overrides ---- */
:root[data-theme="dark"] {
  --color-accent-primary: #7b78fa;
  --color-accent-primary-hover: #948ffb;
  --color-accent-primary-active: #a8a4fc;
  --color-accent-primary-soft: rgba(123, 120, 250, 0.15);
  --color-accent-glow: rgba(123, 120, 250, 0.4);
  --color-accent-secondary: #8b5cf6;
  --color-accent-secondary-soft: rgba(139, 92, 246, 0.15);
  --color-chrome-bg: #0a0a18;
  --color-chrome-bg-soft: #14142a;
  --color-chrome-border: rgba(240, 240, 247, 0.08);

  --color-surface-0: #0d0d1f;
  --color-surface-1: #14142a;
  --color-surface-2: #1a1a36;
  --color-surface-3: #22223c;
  --color-surface-4: #2a2a4a;
  --color-surface-border: rgba(200, 200, 220, 0.16);
  --color-surface-border-strong: rgba(200, 200, 220, 0.30);
  --color-text-primary: #f0f0f7;
  --color-text-secondary: #c8c8dc;
  --color-text-tertiary: #9898b8;
  --color-text-disabled: #6b6b90;
  --color-text-inverse: #14142a;
  /* Unlike text-inverse above, this was left at its light-mode #ffffff with no
     dark-theme override, even though --color-accent-primary/-hover both get
     LIGHTER in dark mode -- white-on-#7b78fa is ~3.55:1 and white-on-#948ffb
     (hover) is ~2.77:1, both failing WCAG AA. Reuses text-inverse's dark value:
     ~5.08:1 / ~6.52:1 against the same two accents (#594). */
  --color-text-on-accent: var(--color-text-inverse);

  --color-feedback-success: #14b8a6;
  --color-feedback-success-soft: rgba(20, 184, 166, 0.15);
  --color-feedback-warning: #f59e0b;
  --color-feedback-warning-soft: rgba(245, 158, 11, 0.15);
  --color-feedback-error: #ef4444;
  --color-feedback-error-soft: rgba(239, 68, 68, 0.15);
  --color-feedback-info: #60a5fa;
  --color-feedback-info-soft: rgba(96, 165, 250, 0.15);

  --color-confidence-high: #14b8a6;
  --color-confidence-high-bg: rgba(20, 184, 166, 0.12);
  --color-confidence-high-border: rgba(20, 184, 166, 0.25);
  --color-confidence-high-text: #2dd4bf;
  --color-confidence-medium: #60a5fa;
  --color-confidence-medium-bg: rgba(96, 165, 250, 0.12);
  --color-confidence-medium-border: rgba(96, 165, 250, 0.25);
  --color-confidence-medium-text: #93c5fd;
  --color-confidence-low: #f59e0b;
  --color-confidence-low-bg: rgba(245, 158, 11, 0.12);
  --color-confidence-low-border: rgba(245, 158, 11, 0.25);
  --color-confidence-low-text: #fbbf24;

  --color-autonomy-supervised: #14b8a6;
  --color-autonomy-supervised-bg: rgba(20, 184, 166, 0.1);
  --color-autonomy-supervised-border: rgba(20, 184, 166, 0.2);
  --color-autonomy-supervised-text: #2dd4bf;
  --color-autonomy-autonomous: #8b5cf6;
  --color-autonomy-autonomous-bg: rgba(139, 92, 246, 0.1);
  --color-autonomy-autonomous-border: rgba(139, 92, 246, 0.2);
  --color-autonomy-autonomous-text: #a78bfa;
  --color-autonomy-human-required: #f59e0b;
  --color-autonomy-human-required-bg: rgba(245, 158, 11, 0.1);
  --color-autonomy-human-required-border: rgba(245, 158, 11, 0.25);
  --color-autonomy-human-required-text: #fbbf24;

  --shadow-elevation-1: 0 1px 3px 0 rgba(0,0,0,.3), 0 1px 2px -1px rgba(0,0,0,.2);
  --shadow-elevation-2: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-elevation-3: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.25);
  --shadow-elevation-4: 0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-accent-primary: #7b78fa;
    --color-accent-primary-hover: #948ffb;
    --color-accent-primary-active: #a8a4fc;
    --color-accent-primary-soft: rgba(123, 120, 250, 0.15);
    --color-accent-glow: rgba(123, 120, 250, 0.4);
    --color-accent-secondary: #8b5cf6;
    --color-accent-secondary-soft: rgba(139, 92, 246, 0.15);
    --color-chrome-bg: #0a0a18;
    --color-chrome-bg-soft: #14142a;
    --color-surface-0: #0d0d1f;
    --color-surface-1: #14142a;
    --color-surface-2: #1a1a36;
    --color-surface-3: #22223c;
    --color-surface-4: #2a2a4a;
    --color-surface-border: rgba(200, 200, 220, 0.16);
    --color-surface-border-strong: rgba(200, 200, 220, 0.30);
    --color-text-primary: #f0f0f7;
    --color-text-secondary: #c8c8dc;
    --color-text-tertiary: #9898b8;
    --color-text-disabled: #6b6b90;
    --color-text-inverse: #14142a;
    --color-text-on-accent: var(--color-text-inverse);
    --color-feedback-success: #14b8a6;
    --color-feedback-success-soft: rgba(20, 184, 166, 0.15);
    --color-feedback-warning: #f59e0b;
    --color-feedback-warning-soft: rgba(245, 158, 11, 0.15);
    --color-feedback-error: #ef4444;
    --color-feedback-error-soft: rgba(239, 68, 68, 0.15);
    --color-feedback-info: #60a5fa;
    --color-feedback-info-soft: rgba(96, 165, 250, 0.15);
    --color-confidence-high: #14b8a6;
    --color-confidence-high-bg: rgba(20, 184, 166, 0.12);
    --color-confidence-high-border: rgba(20, 184, 166, 0.25);
    --color-confidence-high-text: #2dd4bf;
    --color-confidence-medium: #60a5fa;
    --color-confidence-medium-bg: rgba(96, 165, 250, 0.12);
    --color-confidence-medium-border: rgba(96, 165, 250, 0.25);
    --color-confidence-medium-text: #93c5fd;
    --color-confidence-low: #f59e0b;
    --color-confidence-low-bg: rgba(245, 158, 11, 0.12);
    --color-confidence-low-border: rgba(245, 158, 11, 0.25);
    --color-confidence-low-text: #fbbf24;
    --color-autonomy-supervised: #14b8a6;
    --color-autonomy-supervised-bg: rgba(20, 184, 166, 0.1);
    --color-autonomy-supervised-border: rgba(20, 184, 166, 0.2);
    --color-autonomy-supervised-text: #2dd4bf;
    --color-autonomy-autonomous: #8b5cf6;
    --color-autonomy-autonomous-bg: rgba(139, 92, 246, 0.1);
    --color-autonomy-autonomous-border: rgba(139, 92, 246, 0.2);
    --color-autonomy-autonomous-text: #a78bfa;
    --color-autonomy-human-required: #f59e0b;
    --color-autonomy-human-required-bg: rgba(245, 158, 11, 0.1);
    --color-autonomy-human-required-border: rgba(245, 158, 11, 0.25);
    --color-autonomy-human-required-text: #fbbf24;

    --shadow-elevation-1: 0 1px 3px 0 rgba(0,0,0,.3), 0 1px 2px -1px rgba(0,0,0,.2);
    --shadow-elevation-2: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.2);
    --shadow-elevation-3: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.25);
    --shadow-elevation-4: 0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.3);
  }
}