/* ════════════════════════════════════════════════════════════════════
   Sightline Design Tokens — the single source of truth for visual style.
   Every page imports this. Every value below should be referenced as
   var(--token-name) rather than hardcoded.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand ─────────────────────────────────────────────────────── */
  --brand-teal:          #00B4D8;   /* primary action color (CTAs, links, selection) */
  --brand-teal-hover:    #0096B4;   /* hover state for teal */
  --brand-teal-soft:     #E0F7FA;   /* tinted teal background */
  --brand-navy:          #1E4163;   /* structural dark (headers, important text) */
  --brand-navy-deep:     #0D1B2A;   /* darkest navy (rare — login hero, etc.) */

  /* ─── Neutral scale ─────────────────────────────────────────────── */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --white:    #FFFFFF;

  /* ─── Semantic ──────────────────────────────────────────────────── */
  --success:        #059669;
  --success-soft:   #D1FAE5;
  --warning:        #D97706;
  --warning-soft:   #FEF3C7;
  --danger:         #DC2626;
  --danger-soft:    #FEE2E2;
  --info:           var(--brand-teal);
  --info-soft:      var(--brand-teal-soft);

  /* ─── CA Dashboard colors (canonical 5) ─────────────────────────── */
  --dash-blue:    #3F6ECC;
  --dash-green:   #239549;
  --dash-yellow:  #FEB72C;
  --dash-orange:  #FB6F24;
  --dash-red:     #DC001E;

  /* ─── Eddie tier colors (4 levels — used in Target & methodology) ─ */
  --tier-minimal:     var(--gray-500);   /* Minimal effort */
  --tier-typical:     var(--success);    /* Typical / on-track */
  --tier-strong:      #2563EB;           /* Strong growth */
  --tier-exceptional: #7C3AED;           /* Exceptional growth */

  /* ─── Typography ────────────────────────────────────────────────── */
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 8 sizes, that's it */
  --text-xs:    0.7rem;    /* 11.2px — micro labels, sub-text */
  --text-sm:    0.8rem;    /* 12.8px — secondary UI text */
  --text-base:  0.875rem;  /* 14px   — body text */
  --text-md:    1rem;      /* 16px   — emphasized body, default buttons */
  --text-lg:    1.15rem;   /* 18.4px — sub-headings */
  --text-xl:    1.4rem;    /* 22.4px — section headings */
  --text-2xl:   1.75rem;   /* 28px   — page titles */
  --text-3xl:   2.5rem;    /* 40px   — hero stats, display numbers */

  /* Type weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing for ALL CAPS labels */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.06em;

  /* ─── Border radius (4 values) ──────────────────────────────────── */
  --radius-sm:    6px;       /* buttons, inputs, chips */
  --radius-md:    10px;      /* cards, dropdowns */
  --radius-lg:    16px;      /* modals, hero panels */
  --radius-pill:  999px;     /* pills, badges, status indicators */

  /* ─── Spacing (4px grid) ────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ─── Elevation (3 levels) ──────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(0, 180, 216, 0.25);  /* teal focus ring */

  /* ─── Borders ───────────────────────────────────────────────────── */
  --border-thin:    1px;
  --border-medium:  1.5px;
  --border-thick:   2px;
  --border-color:   var(--gray-200);
  --border-strong:  var(--gray-300);

  /* ─── Transitions ───────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* ─── Layout ────────────────────────────────────────────────────── */
  --max-content-width: 1400px;
  --sidebar-width:     260px;
  --nav-height:        56px;
}

/* ────────────────────────────────────────────────────────────────────
   Base / reset
   ──────────────────────────────────────────────────────────────────── */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ────────────────────────────────────────────────────────────────────
   Backward-compatibility aliases.
   Existing pages reference --primary, --accent, --dark, etc.
   These aliases ensure those pages don't break before migration.
   After migration each page's :root block will redefine these to
   point at the canonical tokens above.
   ──────────────────────────────────────────────────────────────────── */
:root {
  --primary:       var(--brand-teal);
  --primary-dark:  var(--brand-teal-hover);
  --accent:        var(--brand-teal);
  --accent-light:  var(--brand-teal-soft);
  --navy:          var(--brand-navy);
  --teal:          var(--brand-teal);
  --teal-deep:     var(--brand-teal-hover);
  --dark:          var(--gray-900);
  --muted:         var(--gray-500);
  --border:        var(--border-color);
  --white:         #FFFFFF;
  --cloud:         var(--gray-50);
  --slate:         var(--gray-500);
  --slate-light:   var(--gray-100);

  /* CA Dashboard color aliases */
  --dash-red:    #DC001E;
  --dash-orange: #FB6F24;
  --dash-yellow: #FEB72C;
  --dash-green:  #239549;
  --dash-blue:   #3F6ECC;
  --db-red:      #DC001E;
  --db-orange:   #FB6F24;
  --db-yellow:   #FEB72C;
  --db-green:    #239549;
  --db-blue:     #3F6ECC;
  --red:         #DC001E;
  --orange:      #FB6F24;
  --yellow:      #FEB72C;
  --green:       #239549;
  --blue:        #3F6ECC;
  --amber:       #FEB72C;
  --purple:      #7C3AED;

  /* Shadow aliases */
  --shadow:       var(--shadow-sm);
  --shadow-hover: var(--shadow-md);

  /* Radius alias */
  --radius:       var(--radius-md);

  /* Transition alias */
  --transition:   var(--transition-base);
}

/* ════════════════════════════════════════════════════════════════════
   Component primitives
   These are starter components for new pages. Existing pages keep
   their own implementations; opt into these as pages get refactored.
   All use sl- prefix to avoid collision with existing classes.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Buttons ───────────────────────────────────────────────────── */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: var(--border-medium) solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.sl-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — the main action color (teal) */
.sl-btn-primary {
  background: var(--brand-teal);
  color: var(--white);
  border-color: var(--brand-teal);
}
.sl-btn-primary:hover:not(:disabled) {
  background: var(--brand-teal-hover);
  border-color: var(--brand-teal-hover);
}

/* Secondary — structural (navy outline) */
.sl-btn-secondary {
  background: var(--white);
  color: var(--brand-navy);
  border-color: var(--gray-300);
}
.sl-btn-secondary:hover:not(:disabled) {
  border-color: var(--brand-navy);
  background: var(--gray-50);
}

/* Ghost — minimal */
.sl-btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border-color: transparent;
}
.sl-btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--brand-navy);
}

/* Danger */
.sl-btn-danger {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}
.sl-btn-danger:hover:not(:disabled) { opacity: 0.9; }

/* Sizes */
.sl-btn-sm { padding: 0.35rem var(--space-3); font-size: var(--text-xs); }
.sl-btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); }

/* ─── Card ──────────────────────────────────────────────────────── */
.sl-card {
  background: var(--white);
  border: var(--border-thin) solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.sl-card-padded { padding: var(--space-6) var(--space-8); }
.sl-card-compact { padding: var(--space-3) var(--space-4); }

/* ─── Form controls ─────────────────────────────────────────────── */
.sl-input,
.sl-select {
  display: block;
  width: 100%;
  padding: 0.55rem var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--gray-800);
  background: var(--white);
  border: var(--border-medium) solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sl-input:focus,
.sl-select:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: var(--shadow-focus);
}
.sl-input::placeholder { color: var(--gray-400); }

.sl-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--gray-600);
  margin-bottom: var(--space-1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ─── Pills / Badges ────────────────────────────────────────────── */
.sl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--gray-700);
}
.sl-pill-success { background: var(--success-soft); color: var(--success); }
.sl-pill-warning { background: var(--warning-soft); color: var(--warning); }
.sl-pill-danger  { background: var(--danger-soft);  color: var(--danger); }
.sl-pill-info    { background: var(--brand-teal-soft); color: var(--brand-teal-hover); }

/* ─── Section header (the uppercase muted label pattern we've been using) ─── */
.sl-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ─── Divider ───────────────────────────────────────────────────── */
.sl-divider {
  border: 0;
  height: 1px;
  background: var(--gray-200);
  margin: var(--space-4) 0;
}