/* ============================================================
   sellbase — Color tokens
   Base palette (raw swatches) + semantic aliases.
   Light theme is the default (:root). Dark theme overrides
   semantic aliases only, scoped to [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Neutral (cool gray) base scale ---- */
  --gray-0: #FFFFFF;
  --gray-50: #FAFAFB;
  --gray-100: #F4F5F7;
  --gray-150: #EDEFF2;
  --gray-200: #E7E9ED;
  --gray-300: #D7DAE0;
  --gray-400: #B4B8C2;
  --gray-500: #8B90A0;
  --gray-600: #666C7D;
  --gray-700: #494E5C;
  --gray-800: #2E313C;
  --gray-900: #1B1D24;
  --gray-950: #101116;

  /* ---- Primary (blue) scale ---- */
  --blue-50: #EFF4FF;
  --blue-100: #DBE7FF;
  --blue-200: #B7CEFF;
  --blue-300: #8FB1FF;
  --blue-400: #5F8CFF;
  --blue-500: #2563EB;
  --blue-600: #1E4FC7;
  --blue-700: #173D9C;
  --blue-800: #122E76;
  --blue-900: #0D2158;

  /* ---- Score / grading scale (traffic light) ---- */
  --green-500: #16A34A;
  --green-600: #128040;
  --green-100: #DCFCE7;
  --green-900: #0B3B21;

  --yellow-500: #EAB308;
  --yellow-600: #B88A00;
  --yellow-100: #FEF9C3;
  --yellow-900: #4A3900;

  --orange-500: #F97316;
  --orange-600: #C2570A;
  --orange-100: #FFEDD5;
  --orange-900: #4A2205;

  --red-500: #DC2626;
  --red-600: #B01E1E;
  --red-100: #FEE2E2;
  --red-900: #4C0D0D;

  /* ---- Emotion accent (used only for client-emotion states) ---- */
  --teal-500: #0D9488;
  --amber-500: #D97706;
  --violet-500: #7C3AED;
  --violet-100: #EDE4FE;
  --violet-900: #2E1065;

  /* =====================================================
     Semantic aliases — LIGHT theme (default)
     ===================================================== */

  /* Surfaces */
  --surface-canvas: var(--gray-50);
  --surface-page: var(--gray-0);
  --surface-card: var(--gray-0);
  --surface-card-sunken: var(--gray-100);
  --surface-overlay: var(--gray-0);
  --surface-tunnel: var(--gray-950); /* AI trainer "tunnel vision" backdrop */
  --surface-inverse: var(--gray-900);
  --surface-hover: var(--gray-100);
  --surface-pressed: var(--gray-150);
  --surface-selected: var(--blue-50);
  --surface-disabled: var(--gray-100);

  /* Borders */
  --border-subtle: var(--gray-150);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--blue-500);

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-on-accent: var(--gray-0);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Brand / accent */
  --accent-default: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-pressed: var(--blue-700);
  --accent-subtle: var(--blue-50);
  --accent-subtle-border: var(--blue-200);
  --on-accent: var(--gray-0);

  /* Semantic status (generic, non-score) */
  --status-success-fg: var(--green-600);
  --status-success-bg: var(--green-100);
  --status-warning-fg: var(--orange-600);
  --status-warning-bg: var(--orange-100);
  --status-danger-fg: var(--red-600);
  --status-danger-bg: var(--red-100);
  --status-info-fg: var(--blue-600);
  --status-info-bg: var(--blue-50);

  /* Score scale — 4-step grading used across QA + trainer results */
  --score-excellent-fg: var(--green-600);
  --score-excellent-bg: var(--green-100);
  --score-excellent-solid: var(--green-500);
  --score-good-fg: var(--yellow-600);
  --score-good-bg: var(--yellow-100);
  --score-good-solid: var(--yellow-500);
  --score-warning-fg: var(--orange-600);
  --score-warning-bg: var(--orange-100);
  --score-warning-solid: var(--orange-500);
  --score-poor-fg: var(--red-600);
  --score-poor-bg: var(--red-100);
  --score-poor-solid: var(--red-500);

  /* Emotion indicators — virtual client state (AI Sales Simulator) */
  --emotion-neutral: var(--gray-500);
  --emotion-neutral-bg: var(--gray-100);
  --emotion-interested: var(--teal-500);
  --emotion-interested-bg: #E3F5F3;
  --emotion-skeptical: var(--amber-500);
  --emotion-skeptical-bg: var(--orange-100);
  --emotion-irritated: var(--red-500);
  --emotion-irritated-bg: var(--red-100);

  /* Metric-type accent colors — Command Center hypothesis cards & charts */
  --metric-conversion: var(--blue-500);
  --metric-conversion-bg: var(--blue-50);
  --metric-activity: var(--green-500);
  --metric-activity-bg: var(--green-100);
  --metric-quality: var(--violet-500);
  --metric-quality-bg: var(--violet-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* =====================================================
   Semantic aliases — DARK theme
   ===================================================== */
[data-theme="dark"] {
  --surface-canvas: var(--gray-950);
  --surface-page: var(--gray-900);
  --surface-card: var(--gray-900);
  --surface-card-sunken: var(--gray-800);
  --surface-overlay: #23252E;
  --surface-tunnel: #000000;
  --surface-inverse: var(--gray-50);
  --surface-hover: var(--gray-800);
  --surface-pressed: var(--gray-700);
  --surface-selected: rgba(37, 99, 235, 0.16);
  --surface-disabled: var(--gray-800);

  --border-subtle: #2A2D38;
  --border-default: #363A47;
  --border-strong: #474C5C;
  --border-focus: var(--blue-400);

  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-700);
  --text-inverse: var(--gray-900);
  --text-on-accent: #FFFFFF;
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);

  --accent-default: var(--blue-400);
  --accent-hover: var(--blue-300);
  --accent-pressed: var(--blue-200);
  --accent-subtle: rgba(37, 99, 235, 0.14);
  --accent-subtle-border: rgba(95, 140, 255, 0.35);
  --on-accent: #0B1220;

  --status-success-fg: #4ADE80;
  --status-success-bg: rgba(22, 163, 74, 0.16);
  --status-warning-fg: #FB923C;
  --status-warning-bg: rgba(249, 115, 22, 0.16);
  --status-danger-fg: #F87171;
  --status-danger-bg: rgba(220, 38, 38, 0.16);
  --status-info-fg: #93B8FF;
  --status-info-bg: rgba(37, 99, 235, 0.16);

  --score-excellent-fg: #4ADE80;
  --score-excellent-bg: rgba(22, 163, 74, 0.16);
  --score-excellent-solid: #22C55E;
  --score-good-fg: #FDE047;
  --score-good-bg: rgba(234, 179, 8, 0.16);
  --score-good-solid: #EAB308;
  --score-warning-fg: #FB923C;
  --score-warning-bg: rgba(249, 115, 22, 0.16);
  --score-warning-solid: #F97316;
  --score-poor-fg: #F87171;
  --score-poor-bg: rgba(220, 38, 38, 0.18);
  --score-poor-solid: #EF4444;

  --emotion-neutral: var(--gray-400);
  --emotion-neutral-bg: var(--gray-800);
  --emotion-interested: #2DD4BF;
  --emotion-interested-bg: rgba(13, 148, 136, 0.18);
  --emotion-skeptical: #FBBF24;
  --emotion-skeptical-bg: rgba(217, 119, 6, 0.18);
  --emotion-irritated: #F87171;
  --emotion-irritated-bg: rgba(220, 38, 38, 0.18);

  --metric-conversion: #5F8CFF;
  --metric-conversion-bg: rgba(37, 99, 235, 0.16);
  --metric-activity: #4ADE80;
  --metric-activity-bg: rgba(22, 163, 74, 0.16);
  --metric-quality: #A78BFA;
  --metric-quality-bg: rgba(124, 58, 237, 0.18);

  --focus-ring: 0 0 0 3px rgba(95, 140, 255, 0.4);
}