/* ══════════════════════════════════════════════════════════════════════════
   BuildWithAdithya — design tokens
   Source of truth for colour, type and elevation. Values come from the
   Claude Design project (Modernist base + the BuildWithAdithya brand layer);
   see design/ for the original document.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — brand spectrum — */
  --bwa-blue: #2563EB;
  --bwa-cyan: #06B6D4;
  --bwa-turq: #10B981;
  --bwa-magenta: #EC4899;
  --bwa-pink: #F43F5E;
  --bwa-orange: #F97316;
  --bwa-amber: #F59E0B;
  --bwa-grad: linear-gradient(90deg, #2563EB 0%, #06B6D4 17%, #10B981 33%, #EC4899 54%, #F43F5E 67%, #F97316 84%, #F59E0B 100%);
  --bwa-mist: #F2F3F5;

  /* — ink variants: the spectrum darkened until it passes contrast on paper — */
  --ink-blue: #1D4ED8;
  --ink-cyan: #0E7490;
  --ink-turq: #047857;
  --ink-magenta: #BE185D;
  --ink-pink: #BE123C;
  --ink-orange: #C2410C;
  --ink-amber: #B45309;

  /* — semantic roles — */
  --color-bg: #FFFFFF;
  --color-surface: #F2F3F5;
  --color-text: #111111;
  --color-divider: var(--rule-mid);
  --color-accent: #2563EB;
  --color-accent-2: #06B6D4;

  --color-accent-100: #EFF5FF;
  --color-accent-200: #DBE8FE;
  --color-accent-300: #BFD7FE;
  --color-accent-400: #8AB4FC;
  --color-accent-500: #2563EB;
  --color-accent-600: #1D4ED8;
  --color-accent-700: #1B3FA8;
  --color-accent-800: #17307C;
  --color-accent-900: #152850;

  --color-accent-2-100: #ECFEFF;
  --color-accent-2-200: #CFFAFE;
  --color-accent-2-300: #A5F0FB;
  --color-accent-2-400: #67E0F2;
  --color-accent-2-500: #06B6D4;
  --color-accent-2-600: #0891A8;
  --color-accent-2-700: #0D7285;
  --color-accent-2-800: #135B6B;
  --color-accent-2-900: #154A58;

  --color-neutral-700: #4B5158;
  --color-neutral-800: #2A2E33;

  /* — surfaces — */
  --pg: #FFFFFF;
  --band: #F2F3F5;
  --card: #FFFFFF;
  --card-hover: #FAFBFC;
  --inset: #F2F3F5;
  --bar-idle: #E5E7EB;

  /* — text — */
  --text: #111111;
  --dim: #6B7280;
  --muted: #9AA1A9;

  /* — rules: the system draws with weight, so it needs a full ladder — */
  --rule: #111111;
  --rule-mid: rgba(17, 17, 17, .16);
  --rule-soft: rgba(17, 17, 17, .14);
  --rule-faint: rgba(17, 17, 17, .11);
  --rule-dash: rgba(17, 17, 17, .40);
  --dash: #B9BFC6;

  /* — inverted fills — */
  --ink-fill: #111111;
  --ink-fill-text: #FFFFFF;
  --on-brand: #FFFFFF;
  --on-bright: #111111;

  /* — dark panel sections inside a light page — */
  --panel: #111111;
  --panel-2: #1F1F1F;
  --panel-text: #FFFFFF;
  --panel-bd: #FFFFFF;
  --panel-line: #3A3F45;
  --panel-rule: #2A2E33;
  --panel-hair: rgba(255, 255, 255, .22);
  --panel-dash: rgba(255, 255, 255, .34);
  --panel-card: #FFFFFF;
  --panel-card-text: #111111;
  --panel-card-bd: #FFFFFF;

  --code-bg: #111111;
  --tint-danger: #FFF1F3;

  --header-bg: rgba(255, 255, 255, .94);
  --shadow-a: rgba(17, 17, 17, .10);
  --shadow-b: rgba(17, 17, 17, .07);

  --glow-1: rgba(37, 99, 235, .32);
  --glow-2: rgba(37, 99, 235, .42);
  --glow-3: rgba(236, 72, 153, .34);
  --sel: rgba(37, 99, 235, .20);

  /* — type — */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bwa-blue: #4C86FF;
  --bwa-cyan: #22C7E6;
  --bwa-turq: #1FC08C;
  --bwa-magenta: #F05CA3;
  --bwa-pink: #F76A80;
  --bwa-orange: #FB8B3C;
  --bwa-amber: #F5B027;
  --bwa-grad: linear-gradient(90deg, #4C86FF 0%, #22C7E6 17%, #1FC08C 33%, #F05CA3 54%, #F76A80 67%, #FB8B3C 84%, #F5B027 100%);

  /* On ink, the ramp inverts: "ink" now means lifted off the background. */
  --ink-blue: #8AB0FF;
  --ink-cyan: #3FD3EE;
  --ink-turq: #34D399;
  --ink-magenta: #F78CC0;
  --ink-pink: #FB8A9C;
  --ink-orange: #FCA75E;
  --ink-amber: #F7C349;

  --color-bg: #0D0E11;
  --color-surface: #1B1E23;
  --color-text: #ECEFF3;
  --color-divider: rgba(255, 255, 255, .24);
  --color-accent: #4C86FF;
  --color-accent-2: #22C7E6;

  --color-accent-100: #1A2740;
  --color-accent-200: #1F3556;
  --color-accent-300: #2A4A79;
  --color-accent-400: #3A66A8;
  --color-accent-500: #4C86FF;
  --color-accent-600: #6E9DFF;
  --color-accent-700: #8FB4FF;
  --color-accent-800: #B3CBFF;
  --color-accent-900: #D6E2FF;

  --color-accent-2-100: #10303A;
  --color-accent-2-200: #143E4B;
  --color-accent-2-300: #1A5464;
  --color-accent-2-400: #1E8CA5;
  --color-accent-2-500: #22C7E6;
  --color-accent-2-600: #45D4EE;
  --color-accent-2-700: #77E2F4;
  --color-accent-2-800: #A8EDF8;
  --color-accent-2-900: #D2F6FC;

  --color-neutral-700: #9AA3AE;
  --color-neutral-800: #C4CBD3;

  --pg: #0D0E11;
  --band: #14161A;
  --card: #1B1E23;
  --card-hover: #22262C;
  --inset: #262A31;
  --bar-idle: #2E333A;

  --text: #ECEFF3;
  --dim: #858D97;
  --muted: #A5ADB7;

  --rule: #333A43;
  --rule-mid: rgba(255, 255, 255, .17);
  --rule-soft: rgba(255, 255, 255, .13);
  --rule-faint: rgba(255, 255, 255, .10);
  --rule-dash: rgba(255, 255, 255, .28);
  --dash: #3C424A;

  --ink-fill: #E7EAEE;
  --ink-fill-text: #0D0E11;
  --on-brand: #0D0E11;
  --on-bright: #0D0E11;

  --panel: #16181D;
  --panel-2: #1E2127;
  --panel-text: #F1F3F6;
  --panel-bd: #454C55;
  --panel-line: #3B424B;
  --panel-rule: #2A2F36;
  --panel-hair: rgba(255, 255, 255, .14);
  --panel-dash: rgba(255, 255, 255, .24);
  --panel-card: #23272E;
  --panel-card-text: #F1F3F6;
  --panel-card-bd: #3B424B;

  --code-bg: #0A0B0D;
  --tint-danger: rgba(247, 106, 128, .14);

  --header-bg: rgba(13, 14, 17, .92);
  --shadow-a: rgba(0, 0, 0, .60);
  --shadow-b: rgba(0, 0, 0, .50);

  --glow-1: rgba(76, 134, 255, .22);
  --glow-2: rgba(76, 134, 255, .28);
  --glow-3: rgba(240, 92, 163, .20);
  --sel: rgba(76, 134, 255, .28);
}