/* ================================================
   DECISION TEAM — "QUIET CONFIDENCE" DESIGN SYSTEM
   Base Tokens & Typography
   ================================================ */

:root {
  /* ========== FOUNDATION COLORS - LIGHT MODE ========== */
  --bg-canvas: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-subtle: #F1F3F5;
  --border-default: #DEE2E6;
  --border-subtle: #E9ECEF;
  --border-hover: #ADB5BD;
  --border-strong: #6C757D;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #6C757D;
  --text-muted: #ADB5BD;
  --text-disabled: #ADB5BD;
  --text-inverse: #FFFFFF;

  /* Primary & Accent */
  --primary-100: #F1F5F9;
  --primary-200: #E2E8F0;
  --primary-300: #CBD5E1;
  --primary-400: #94A3B8;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1E293B;
  --accent-100: #FEF3C7;
  --accent-300: #FCD34D;
  --accent-400: #FBBF24;
  --accent-500: #D97706;
  --accent-600: #B45309;

  /* Product Colors - Advisory Teams (Blue) */
  --advisory-50: #EFF6FF;
  --advisory-100: #DBEAFE;
  --advisory-500: #3B82F6;
  --advisory-600: #2563EB;
  --advisory-900: #1E3A5F;

  /* Product Colors - Customer Panels (Purple) */
  --panel-50: #F5F3FF;
  --panel-100: #EDE9FE;
  --panel-500: #8B5CF6;
  --panel-600: #7C3AED;
  --panel-900: #3B2F5F;

  /* Semantic Colors */
  --success-100: #D1FAE5;
  --success-500: #059669;
  --success-600: #047857;
  --warning-100: #FEF3C7;
  --warning-500: #D97706;
  --warning-600: #B45309;
  --error-100: #FEE2E2;
  --error-500: #DC2626;
  --error-600: #B91C1C;
  --info-100: #E0F2FE;
  --info-500: #0284C7;
  --info-600: #0369A1;

  /* Expert Avatar Colors */
  --expert-chair: #475569;
  --expert-1: #3B82F6;
  --expert-2: #059669;
  --expert-3: #D97706;
  --expert-user: #6C757D;

  /* ========== SPACING ========== */
  --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;

  /* ========== AVATAR SIZING ========== */
  /* Hero-size Claire avatar used on the dashboard launchpad.
     The chat-size tokens live in chat.css alongside the base .chat-avatar
     component; this token is exposed on :root so non-chat surfaces (e.g.
     the dashboard) can opt into the hero size without pulling chat.css. */
  --size-avatar-hero: 72px;
  --size-avatar-hero-font: 1.5rem;

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* ========== TRANSITIONS ========== */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: ease-in-out;
  --ease-out: ease-out;

  /* ========== BOOTSTRAP OVERRIDES ========== */
  --bs-primary: #475569;
  --bs-secondary: #6C757D;
  --bs-success: #059669;
  --bs-warning: #D97706;
  --bs-danger: #DC2626;
  --bs-info: #0284C7;
  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
}

/* ========== DARK MODE - System Preference ========== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Foundation Colors - Dark Mode */
    --bg-canvas: #0F172A;
    --bg-surface: #1E293B;
    --bg-surface-raised: #334155;
    --bg-subtle: #1E293B;
    --border-default: #334155;
    --border-subtle: #1E293B;
    --border-hover: #475569;
    --border-strong: #94A3B8;

    /* Text Colors - Dark Mode */
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-muted: #64748B;
    --text-disabled: #64748B;
    --text-inverse: #0F172A;

    /* Primary & Accent - Dark Mode (lighter for visibility) */
    --primary-400: #94A3B8;
    --primary-300: #CBD5E1;
    --primary-200: #E2E8F0;
    --accent-400: #FBBF24;
    --accent-300: #FCD34D;

    /* Product Colors - Dark Mode */
    --advisory-400: #60A5FA;
    --panel-400: #A78BFA;

    /* Shadows - Reduced for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
  }
}

/* ========== LIGHT MODE - Manual Toggle (overrides system preference) ========== */
[data-theme="light"] {
  --bg-canvas: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-subtle: #F1F3F5;
  --border-default: #DEE2E6;
  --border-subtle: #E9ECEF;
  --border-hover: #ADB5BD;
  --border-strong: #6C757D;

  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #6C757D;
  --text-muted: #ADB5BD;
  --text-disabled: #ADB5BD;
  --text-inverse: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* ========== DARK MODE - Manual Toggle ========== */
[data-theme="dark"] {
  --bg-canvas: #0F172A;
  --bg-surface: #1E293B;
  --bg-surface-raised: #334155;
  --bg-subtle: #1E293B;
  --border-default: #334155;
  --border-subtle: #1E293B;
  --border-hover: #475569;
  --border-strong: #94A3B8;

  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #64748B;
  --text-inverse: #0F172A;

  --primary-400: #94A3B8;
  --primary-300: #CBD5E1;
  --primary-200: #E2E8F0;
  --accent-400: #FBBF24;
  --accent-300: #FCD34D;

  --advisory-400: #60A5FA;
  --panel-400: #A78BFA;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
}

/* ========== BASE STYLES ========== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--primary-700);
}

strong, b {
  font-weight: var(--font-semibold);
}

small {
  font-size: var(--text-sm);
}

/* ========== UTILITY CLASSES ========== */

/* Text Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-disabled { color: var(--text-disabled) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-accent { color: var(--accent-500) !important; }
.text-success { color: var(--success-500) !important; }
.text-warning { color: var(--warning-500) !important; }
.text-error { color: var(--error-500) !important; }
.text-info { color: var(--info-500) !important; }
.text-advisory { color: var(--advisory-500) !important; }
.text-panel { color: var(--panel-500) !important; }

/* Background Colors */
.bg-canvas { background-color: var(--bg-canvas) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-subtle { background-color: var(--bg-subtle) !important; }
.bg-primary { background-color: var(--primary-800) !important; }
.bg-accent { background-color: var(--accent-500) !important; }
.bg-success { background-color: var(--success-100) !important; }
.bg-warning { background-color: var(--warning-100) !important; }
.bg-error { background-color: var(--error-100) !important; }
.bg-info { background-color: var(--info-100) !important; }
.bg-advisory { background-color: var(--advisory-50) !important; }
.bg-panel { background-color: var(--panel-50) !important; }

/* Border Colors */
.border-default { border-color: var(--border-default) !important; }
.border-subtle { border-color: var(--border-subtle) !important; }
.border-hover { border-color: var(--border-hover) !important; }
.border-strong { border-color: var(--border-strong) !important; }
.border-advisory { border-color: var(--advisory-500) !important; }
.border-panel { border-color: var(--panel-500) !important; }

/* Font Sizes */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }

/* Font Weights */
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.25s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.25s !important;
  }
}