/*
 * PROMPTIX design tokens.
 * Light = docs/color-system.txt (variable names unchanged).
 * Dark  = proposed palette (SRS v3, 5.3) overriding the SAME variable names.
 * Components must use semantic tokens only (no raw hex / --slate-*).
 */

:root {
  /* Brand */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #E0E7FF;
  --color-purple: #7C3AED;
  --color-cyan: #06B6D4;

  /* Neutral (reference scale; do not use directly in components) */
  --navy-900: #111827;
  --slate-800: #1F2937;
  --slate-700: #374151;
  --slate-500: #6B7280;
  --slate-400: #9CA3AF;
  --slate-300: #D1D5DB;
  --slate-200: #E5E7EB;
  --slate-100: #F3F4F6;
  --slate-50: #F9FAFB;
  --white: #FFFFFF;

  /* Semantic */
  --color-success: #10B981;
  --color-success-bg: #DCFCE7;
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --gradient-soft: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);

  /* Surfaces */
  --bg-page: #F9FAFB;
  --bg-section: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-active: #E0E7FF;
  --bg-input: #FFFFFF;
  --bg-subtle: #F3F4F6;

  /* Borders */
  --border-default: #E5E7EB;
  --border-strong: #D1D5DB;
  --border-focus: #93C5FD;

  /* Typography */
  --text-heading: #111827;
  --text-heading-secondary: #1F2937;
  --text-body: #374151;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-link: #2563EB;

  /* UI states */
  --ui-link: #2563EB;
  --ui-hover: #1D4ED8;
  --ui-disabled: #D1D5DB;
  --ui-disabled-fg: #FFFFFF;
  --ui-focus-ring: #93C5FD;
  --ui-focus-glow: rgba(37, 99, 235, 0.12);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.10);

  /* Badges */
  --badge-primary-fg: #1D4ED8;  --badge-primary-bg: #EFF6FF;
  --badge-purple-fg:  #6D28D9;  --badge-purple-bg:  #F5F3FF;
  --badge-success-fg: #047857;  --badge-success-bg: #DCFCE7;
  --badge-warning-fg: #B45309;  --badge-warning-bg: #FEF3C7;
  --badge-error-fg:   #B91C1C;  --badge-error-bg:   #FEE2E2;
  --badge-info-fg:    #1D4ED8;  --badge-info-bg:    #DBEAFE;

  /* Alerts (border colours) */
  --alert-success-border: #A7F3D0;
  --alert-info-border:    #BFDBFE;
  --alert-warning-border: #FDE68A;
  --alert-error-border:   #FECACA;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Layout */
  --viewport-width: 1920px;
  --container-width: 1440px;
  --gutter: 24px;
  --header-height: 72px;

  /* Font */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Classic Dark – corporate slate, no neon / glow / glass. */
:root[data-theme="dark"] {
  --color-primary: #2563EB;
  --color-primary-hover: #3B82F6;
  --color-primary-light: rgba(37, 99, 235, 0.20);
  --color-purple: #8B5CF6;
  --color-cyan: #22D3EE;

  --color-success-bg: rgba(16, 185, 129, 0.16);
  --color-error-bg: rgba(239, 68, 68, 0.16);
  --color-warning-bg: rgba(245, 158, 11, 0.16);
  --color-info-bg: rgba(59, 130, 246, 0.16);

  --gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);

  --bg-page: #0F172A;
  --bg-section: #111827;
  --bg-card: #1F2937;
  --bg-hover: #273244;
  --bg-active: rgba(37, 99, 235, 0.22);
  --bg-input: #111827;
  --bg-subtle: #273244;

  --border-default: #374151;
  --border-strong: #4B5563;
  --border-focus: #60A5FA;

  --text-heading: #F9FAFB;
  --text-heading-secondary: #E5E7EB;
  --text-body: #D1D5DB;
  --text-secondary: #9CA3AF;
  --text-muted: #8A94A6;
  --text-inverse: #FFFFFF;
  --text-link: #60A5FA;

  --ui-link: #60A5FA;
  --ui-hover: #93C5FD;
  --ui-disabled: #4B5563;
  --ui-disabled-fg: #9CA3AF;
  --ui-focus-ring: #60A5FA;
  --ui-focus-glow: rgba(96, 165, 250, 0.25);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50);

  --badge-primary-fg: #93C5FD;  --badge-primary-bg: rgba(37, 99, 235, 0.20);
  --badge-purple-fg:  #C4B5FD;  --badge-purple-bg:  rgba(124, 58, 237, 0.22);
  --badge-success-fg: #6EE7B7;  --badge-success-bg: rgba(16, 185, 129, 0.16);
  --badge-warning-fg: #FCD34D;  --badge-warning-bg: rgba(245, 158, 11, 0.16);
  --badge-error-fg:   #FCA5A5;  --badge-error-bg:   rgba(239, 68, 68, 0.16);
  --badge-info-fg:    #93C5FD;  --badge-info-bg:    rgba(59, 130, 246, 0.16);

  --alert-success-border: rgba(16, 185, 129, 0.35);
  --alert-info-border:    rgba(59, 130, 246, 0.35);
  --alert-warning-border: rgba(245, 158, 11, 0.35);
  --alert-error-border:   rgba(239, 68, 68, 0.35);

  color-scheme: dark;
}