/* ============================================================
   DESIGN TOKENS — Theme variables for all palette × mode combos

   Architecture:
   - data-palette: "warm" | "cool" | "forest"
   - data-mode:    "light" | "dark"
   - Bare :root = warm-light fallback (no-JS safe)

   Naming: shadcn/UI conventions + domain-specific semantic colors.
   Domain colors (--human, --ai, etc.) stored as full hsl() values
   so JS inline styles can reference them directly.
   ============================================================ */

/* ── WARM LIGHT (default / fallback) ── */
:root,
[data-palette="warm"][data-mode="light"] {
  color-scheme: light;

  /* Surfaces */
  --background:         40 30% 98%;
  --foreground:         0 0% 10%;
  --card:               0 0% 100%;
  --card-foreground:    0 0% 10%;
  --popover:            0 0% 100%;
  --popover-foreground: 0 0% 10%;

  /* Muted */
  --muted:              40 15% 96%;
  --muted-foreground:   0 0% 42%;

  /* Interactive */
  --primary:            221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary:          293 79% 49%;
  --secondary-foreground: 0 0% 100%;
  --accent:             40 15% 95%;
  --accent-foreground:  0 0% 24%;
  --destructive:        0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Borders & inputs */
  --border:             40 12% 88%;
  --border-light:       40 12% 92%;
  --input:              40 12% 88%;
  --ring:               221 83% 53%;

  /* Radius */
  --radius:             0.625rem;

  /* Typography */
  --font-sans:  'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Text hierarchy */
  --ink-2:  0 0% 24%;
  --ink-3:  0 0% 42%;
  --ink-4:  0 0% 60%;
  --ink-5:  0 0% 73%;

  /* Domain semantic colors (full hsl values for JS compatibility) */
  --human:           hsl(221 83% 53%);
  --human-bg:        hsla(221, 83%, 53%, 0.06);
  --human-bg-strong: hsla(221, 83%, 53%, 0.10);

  --ai:              hsl(293 79% 49%);
  --ai-bg:           hsla(293, 79%, 49%, 0.06);
  --ai-bg-strong:    hsla(293, 79%, 49%, 0.10);
  --model-bg:        hsla(293, 79%, 49%, 0.04);

  --flow:            hsl(38 90% 44%);
  --iface:           hsl(160 93% 30%);
  --iface-bg:        hsla(160, 93%, 30%, 0.08);

  --gov:             hsl(239 84% 67%);
  --gov-bg:          hsla(239, 84%, 67%, 0.06);
  --gov-bg-strong:   hsla(239, 84%, 67%, 0.10);

  /* Diagram background */
  --diagram-bg:      40 20% 98%;

  /* SVG-safe backward-compatible aliases (resolve dynamically per theme) */
  --ink:        hsl(var(--foreground));
  --ink-color:  hsl(var(--foreground));
  --bg-color:   hsl(var(--background));
  --card-color: hsl(var(--card));
  --rule-color: hsl(var(--border));
  --diagram-rect-fill: hsla(40, 30%, 98%, 0.5);
}


/* ── WARM DARK ── */
[data-palette="warm"][data-mode="dark"] {
  color-scheme: dark;

  --background:         30 10% 7%;
  --foreground:         35 15% 88%;
  --card:               30 8% 11%;
  --card-foreground:    35 15% 88%;
  --popover:            30 8% 11%;
  --popover-foreground: 35 15% 88%;

  --muted:              30 8% 15%;
  --muted-foreground:   35 10% 55%;

  --primary:            221 83% 63%;
  --primary-foreground: 0 0% 100%;
  --secondary:          293 70% 60%;
  --secondary-foreground: 0 0% 100%;
  --accent:             30 8% 15%;
  --accent-foreground:  35 15% 80%;
  --destructive:        0 72% 55%;
  --destructive-foreground: 0 0% 100%;

  --border:             30 8% 18%;
  --border-light:       30 8% 14%;
  --input:              30 8% 18%;
  --ring:               221 83% 63%;

  --ink-2:  35 10% 75%;
  --ink-3:  35 8% 62%;
  --ink-4:  35 6% 50%;
  --ink-5:  35 5% 42%;

  --human:           hsl(221 83% 65%);
  --human-bg:        hsla(221, 83%, 55%, 0.12);
  --human-bg-strong: hsla(221, 83%, 55%, 0.18);

  --ai:              hsl(293 70% 62%);
  --ai-bg:           hsla(293, 70%, 55%, 0.12);
  --ai-bg-strong:    hsla(293, 70%, 55%, 0.18);
  --model-bg:        hsla(293, 70%, 55%, 0.08);

  --flow:            hsl(38 90% 55%);
  --iface:           hsl(160 80% 42%);
  --iface-bg:        hsla(160, 80%, 42%, 0.12);

  --gov:             hsl(239 80% 72%);
  --gov-bg:          hsla(239, 80%, 72%, 0.12);
  --gov-bg-strong:   hsla(239, 80%, 72%, 0.18);

  --diagram-bg:      30 8% 13%;
  --diagram-rect-fill: hsla(30, 8%, 13%, 0.5);
}


/* ── COOL LIGHT ── */
[data-palette="cool"][data-mode="light"] {
  color-scheme: light;

  --background:         220 25% 97%;
  --foreground:         222 15% 10%;
  --card:               0 0% 100%;
  --card-foreground:    222 15% 10%;
  --popover:            0 0% 100%;
  --popover-foreground: 222 15% 10%;

  --muted:              220 15% 94%;
  --muted-foreground:   220 8% 46%;

  --primary:            217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary:          270 70% 55%;
  --secondary-foreground: 0 0% 100%;
  --accent:             220 15% 95%;
  --accent-foreground:  222 12% 26%;
  --destructive:        0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border:             220 13% 88%;
  --border-light:       220 13% 92%;
  --input:              220 13% 88%;
  --ring:               217 91% 60%;

  --ink-2:  222 10% 26%;
  --ink-3:  220 8% 46%;
  --ink-4:  220 5% 58%;
  --ink-5:  220 4% 72%;

  --human:           hsl(217 91% 60%);
  --human-bg:        hsla(217, 91%, 60%, 0.07);
  --human-bg-strong: hsla(217, 91%, 60%, 0.12);

  --ai:              hsl(270 70% 55%);
  --ai-bg:           hsla(270, 70%, 55%, 0.07);
  --ai-bg-strong:    hsla(270, 70%, 55%, 0.12);
  --model-bg:        hsla(270, 70%, 55%, 0.04);

  --flow:            hsl(43 96% 50%);
  --iface:           hsl(160 84% 36%);
  --iface-bg:        hsla(160, 84%, 36%, 0.08);

  --gov:             hsl(239 84% 67%);
  --gov-bg:          hsla(239, 84%, 67%, 0.07);
  --gov-bg-strong:   hsla(239, 84%, 67%, 0.12);

  --diagram-bg:      220 15% 97%;
  --diagram-rect-fill: hsla(220, 25%, 97%, 0.5);
}


/* ── COOL DARK ── */
[data-palette="cool"][data-mode="dark"] {
  color-scheme: dark;

  --background:         222 30% 7%;
  --foreground:         215 20% 88%;
  --card:               222 22% 11%;
  --card-foreground:    215 20% 88%;
  --popover:            222 22% 11%;
  --popover-foreground: 215 20% 88%;

  --muted:              222 18% 15%;
  --muted-foreground:   215 12% 55%;

  --primary:            217 91% 65%;
  --primary-foreground: 0 0% 100%;
  --secondary:          270 65% 65%;
  --secondary-foreground: 0 0% 100%;
  --accent:             222 18% 16%;
  --accent-foreground:  215 15% 78%;
  --destructive:        0 72% 55%;
  --destructive-foreground: 0 0% 100%;

  --border:             222 18% 18%;
  --border-light:       222 18% 14%;
  --input:              222 18% 18%;
  --ring:               217 91% 65%;

  --ink-2:  215 12% 75%;
  --ink-3:  215 10% 62%;
  --ink-4:  215 8% 50%;
  --ink-5:  215 6% 42%;

  --human:           hsl(217 91% 68%);
  --human-bg:        hsla(217, 91%, 60%, 0.14);
  --human-bg-strong: hsla(217, 91%, 60%, 0.20);

  --ai:              hsl(270 65% 68%);
  --ai-bg:           hsla(270, 65%, 60%, 0.14);
  --ai-bg-strong:    hsla(270, 65%, 60%, 0.20);
  --model-bg:        hsla(270, 65%, 60%, 0.08);

  --flow:            hsl(43 96% 60%);
  --iface:           hsl(160 75% 48%);
  --iface-bg:        hsla(160, 75%, 48%, 0.14);

  --gov:             hsl(239 80% 74%);
  --gov-bg:          hsla(239, 80%, 74%, 0.14);
  --gov-bg-strong:   hsla(239, 80%, 74%, 0.20);

  --diagram-bg:      222 20% 13%;
  --diagram-rect-fill: hsla(222, 20%, 13%, 0.5);
}


/* ── FOREST LIGHT ── */
[data-palette="forest"][data-mode="light"] {
  color-scheme: light;

  --background:         140 15% 96%;
  --foreground:         150 10% 10%;
  --card:               0 0% 100%;
  --card-foreground:    150 10% 10%;
  --popover:            0 0% 100%;
  --popover-foreground: 150 10% 10%;

  --muted:              140 10% 93%;
  --muted-foreground:   150 6% 44%;

  --primary:            200 80% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary:          280 65% 52%;
  --secondary-foreground: 0 0% 100%;
  --accent:             140 10% 94%;
  --accent-foreground:  150 8% 25%;
  --destructive:        0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border:             140 8% 87%;
  --border-light:       140 8% 91%;
  --input:              140 8% 87%;
  --ring:               200 80% 50%;

  --ink-2:  150 6% 25%;
  --ink-3:  150 5% 44%;
  --ink-4:  150 4% 57%;
  --ink-5:  150 3% 71%;

  --human:           hsl(200 80% 50%);
  --human-bg:        hsla(200, 80%, 50%, 0.07);
  --human-bg-strong: hsla(200, 80%, 50%, 0.12);

  --ai:              hsl(280 65% 52%);
  --ai-bg:           hsla(280, 65%, 52%, 0.07);
  --ai-bg-strong:    hsla(280, 65%, 52%, 0.12);
  --model-bg:        hsla(280, 65%, 52%, 0.04);

  --flow:            hsl(38 85% 48%);
  --iface:           hsl(160 80% 32%);
  --iface-bg:        hsla(160, 80%, 32%, 0.08);

  --gov:             hsl(245 70% 62%);
  --gov-bg:          hsla(245, 70%, 62%, 0.07);
  --gov-bg-strong:   hsla(245, 70%, 62%, 0.12);

  --diagram-bg:      140 10% 97%;
  --diagram-rect-fill: hsla(140, 15%, 96%, 0.5);
}


/* ── FOREST DARK ── */
[data-palette="forest"][data-mode="dark"] {
  color-scheme: dark;

  --background:         150 20% 6%;
  --foreground:         140 12% 86%;
  --card:               150 15% 10%;
  --card-foreground:    140 12% 86%;
  --popover:            150 15% 10%;
  --popover-foreground: 140 12% 86%;

  --muted:              150 12% 14%;
  --muted-foreground:   140 8% 52%;

  --primary:            200 80% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary:          280 60% 65%;
  --secondary-foreground: 0 0% 100%;
  --accent:             150 12% 15%;
  --accent-foreground:  140 10% 78%;
  --destructive:        0 72% 55%;
  --destructive-foreground: 0 0% 100%;

  --border:             150 12% 17%;
  --border-light:       150 12% 13%;
  --input:              150 12% 17%;
  --ring:               200 80% 60%;

  --ink-2:  140 8% 74%;
  --ink-3:  140 6% 60%;
  --ink-4:  140 5% 50%;
  --ink-5:  140 4% 42%;

  --human:           hsl(200 80% 64%);
  --human-bg:        hsla(200, 80%, 55%, 0.14);
  --human-bg-strong: hsla(200, 80%, 55%, 0.20);

  --ai:              hsl(280 60% 68%);
  --ai-bg:           hsla(280, 60%, 60%, 0.14);
  --ai-bg-strong:    hsla(280, 60%, 60%, 0.20);
  --model-bg:        hsla(280, 60%, 60%, 0.08);

  --flow:            hsl(38 85% 58%);
  --iface:           hsl(160 72% 45%);
  --iface-bg:        hsla(160, 72%, 45%, 0.14);

  --gov:             hsl(245 70% 72%);
  --gov-bg:          hsla(245, 70%, 72%, 0.14);
  --gov-bg-strong:   hsla(245, 70%, 72%, 0.20);

  --diagram-bg:      150 14% 12%;
  --diagram-rect-fill: hsla(150, 14%, 12%, 0.5);
}