/* ═══════════════════════════════════════════════════════════════
   colors.css — KB Brand Color System
   ═══════════════════════════════════════════════════════════════
   All color custom properties for the brand system.
   Imported by brand-tokens.css (the root).
   To change the color theme: edit this file only.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #FAFAFA;
  --color-bg-muted:       #F5F5F5;
  --color-bg-warm:        rgb(247, 247, 238);
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FAFAFA;
  --color-border:         rgba(0, 0, 0, 0.08);
  --color-border-strong:  rgba(0, 0, 0, 0.15);

  /* ── Text (opacity-based on current bg) ── */
  --color-text-primary:   rgba(0, 0, 0, 0.85);
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-muted:     rgba(0, 0, 0, 0.65);
  --color-text-faint:     rgba(0, 0, 0, 0.60); /* AA: 5.5:1 on white */
  --color-text-inverse:   #fff;

  /* ── Brand: Teal (7-step) ── */
  --teal-100: #E0F5F5;
  --teal-200: #B3E8E8;
  --teal-300: #7ECACA;
  --teal-400: #6FCDCD;
  --teal-500: #4BAFAF;
  --teal-600: #338A8A;
  --teal-700: #236363;

  /* ── Brand: Purple (7-step) ── */
  --purple-100: #EDEAF5;
  --purple-200: #C4BDE0;
  --purple-300: #9B8FC8;
  --purple-400: #8B7FB8;
  --purple-500: #6B5CA5;
  --purple-600: #4E4080;
  --purple-700: #352C5C;

  /* ── Sequential Ramp (Teal, 5-step choropleth) ── */
  --seq-1: #E0F5F5;
  --seq-2: #9CDFDF;
  --seq-3: #6FCDCD;
  --seq-4: #4BAFAF;
  --seq-5: #236363;

  /* ── Diverging Ramp (Purple ↔ Teal, 7-step) ── */
  --div-1: #6B5CA5;
  --div-2: #A99DD0;
  --div-3: #E8E4F0;
  --div-4: #F5F5F5;
  --div-5: #D0EDED;
  --div-6: #7ECACA;
  --div-7: #338A8A;

  /* ── Categorical (6-color, dark+light BG safe) ── */
  --cat-teal:   #6FCDCD;
  --cat-purple: #8B7FB8;
  --cat-peach:  #E8A87C;
  --cat-rose:   #E85D75;
  --cat-sage:   #95C77E;
  --cat-gold:   #F2CC60;

  /* ── Semantic / Functional ── */
  /* Accessible teal for text-on-white (5.58:1 contrast ratio) */
  --color-accent-text: var(--teal-600);
  --color-accent:     var(--teal-400);
  --color-accent-alt: var(--purple-400);
  --color-highlight:  #F2CC60;
  --color-annotation: #E8A87C;
  --color-success:    #95C77E;
  --color-error:      #E85D75;
  --color-link:       var(--teal-500);
  --color-link-hover: var(--teal-600);

  /* ── Diversity Project Palette (teal→purple gradient) ── */
  --diversity-1: #9EDFE4;
  --diversity-2: #75D3DD;
  --diversity-3: #71C2DE;
  --diversity-4: #78ACE6;
  --diversity-5: #7C99ED;
  --diversity-6: #7E84F4;
  --diversity-7: #7E6CFA;
  --diversity-accent: #7E6CFA;
  --diversity-donut-1: #B2A7FD;
  --diversity-donut-2: #AFE5EA;

  /* ── Dark viz surfaces (used inside .theme-dark or dataviz containers) ── */
  --dark-bg:      #1A1A1A;
  --dark-surface: #242424;
  --dark-raised:  #2A2A2A;
  --dark-border:  #333333;

  /* ── Viz-specific text (on dark backgrounds) ── */
  --viz-text-primary:   rgba(255, 255, 255, 0.90);
  --viz-text-secondary: rgba(255, 255, 255, 0.65);
  --viz-text-muted:     rgba(255, 255, 255, 0.50);
  --viz-text-faint:     rgba(255, 255, 255, 0.20);
  --viz-stroke:         rgba(255, 255, 255, 0.10);
  --viz-grid:           rgba(255, 255, 255, 0.06);

  /* ── Overlay / translucent backgrounds ── */
  --color-nav-bg:         rgba(255, 255, 255, 0.92);
  --color-overlay-bg:     rgba(255, 255, 255, 0.97);
  --color-hover-subtle:   rgba(0, 0, 0, 0.05);
  --color-overlay-dark:   rgba(0, 0, 0, 0.70);
  --color-overlay-card:   rgba(0, 0, 0, 0.55);

  /* ── Teal/purple with opacity (for hover states, borders) ── */
  --teal-overlay-06:  rgba(111, 205, 205, 0.06);
  --teal-overlay-10:  rgba(111, 205, 205, 0.10);
  --teal-overlay-15:  rgba(111, 205, 205, 0.15);
  --teal-overlay-30:  rgba(111, 205, 205, 0.30);
  --purple-overlay-15: rgba(107, 92, 165, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   .theme-dark — Per-section dark mode
   ═══════════════════════════════════════════════════════════════
   Apply to any <section>, <div>, or container.
   All downstream components automatically adapt via var().
   ═══════════════════════════════════════════════════════════════ */

.theme-dark {
  --color-bg:             #1A1A1A;
  --color-bg-subtle:      #212121;
  --color-bg-muted:       #2A2A2A;
  --color-surface:        #1A1A1A;
  --color-surface-raised: #242424;
  --color-border:         rgba(255, 255, 255, 0.06);
  --color-border-strong:  rgba(255, 255, 255, 0.12);

  --color-text-primary:   rgba(255, 255, 255, 0.90);
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-muted:     rgba(255, 255, 255, 0.65);
  --color-text-faint:     rgba(255, 255, 255, 0.55); /* AA on dark bg */

  --color-link:       var(--teal-300);
  --color-link-hover: var(--teal-400);

  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

/* Dark mode table fix */
.theme-dark table,
.theme-dark th,
.theme-dark td {
  color: inherit;
  border-color: var(--color-border);
}