/* briankwizera.com v3 tokens. Light is the base; dark redefines the same roles.
   Theme resolution: explicit [data-theme] wins. The head script sets data-theme="light" on a first visit;
   only a stored 'system' choice leaves it off, and then the OS preference below applies. */
:root {
  color-scheme: light;
  --bg: #F3F5F6;
  --surface: #FFFFFF;
  --surface-2: #E8EDF0;
  --ink: #0B0F12;
  --ink-2: #2B3238;
  --muted: #56606A;          /* 5.9:1 on bg, 5.4:1 on surface-2: AA for small grey text */
  --line: #D6DDE2;
  --line-strong: #B9C3CA;
  --accent: #0393B2;         /* live brand cyan: fills, dots, focus, large text only (3.3:1) */
  --accent-text: #026F87;    /* cyan for text under 24px: 5.3:1 on bg, 5.8:1 on surface */
  --accent-soft: rgba(3, 147, 178, .10);
  --on-accent: #FFFFFF;
  --btn-bg: #0B0F12;
  --btn-ink: #FFFFFF;
  --band-bg: #0B0F12;        /* closing contact band stays dark in light mode: the "night shift" */
  --band-ink: #EEF3F5;
  --band-muted: #9AA6AE;
  --band-accent: #22C3E6;
  --shadow-1: 0 1px 2px rgba(11, 15, 18, .06), 0 8px 24px -12px rgba(11, 15, 18, .18);
  --shadow-2: 0 2px 4px rgba(11, 15, 18, .06), 0 24px 48px -20px rgba(11, 15, 18, .28);
  --photo-veil: rgba(11, 15, 18, 0);
  --hero-glow: transparent;

  --font-display: "Rajdhani", "Arial Narrow", sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* reveals, count-up */
  --ease-snap: cubic-bezier(.32, .72, 0, 1);     /* toggle, accordion (uselayouts) */
  --dur-1: 160ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 700ms;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 80px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080B0D;
  --surface: #10161A;
  --surface-2: #172027;
  --ink: #EEF3F5;
  --ink-2: #BAC4CB;
  --muted: #8C98A1;          /* 6.7:1 on bg */
  --line: #1D272E;
  --line-strong: #2C3942;
  --accent: #1FC2E4;         /* lifted cyan: same hue family, 9.3:1 on bg */
  --accent-text: #3FD0EE;
  --accent-soft: rgba(31, 194, 228, .12);
  --on-accent: #041014;
  --btn-bg: #EEF3F5;
  --btn-ink: #080B0D;
  --band-bg: #0E1418;
  --band-ink: #EEF3F5;
  --band-muted: #93A0A8;
  --band-accent: #1FC2E4;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .8);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 32px 64px -24px rgba(0, 0, 0, .9);
  --photo-veil: rgba(8, 11, 13, .10);
  --hero-glow: rgba(31, 194, 228, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #080B0D; --surface: #10161A; --surface-2: #172027;
    --ink: #EEF3F5; --ink-2: #BAC4CB; --muted: #8C98A1;
    --line: #1D272E; --line-strong: #2C3942;
    --accent: #1FC2E4; --accent-text: #3FD0EE; --accent-soft: rgba(31, 194, 228, .12); --on-accent: #041014;
    --btn-bg: #EEF3F5; --btn-ink: #080B0D;
    --band-bg: #0E1418; --band-ink: #EEF3F5; --band-muted: #93A0A8; --band-accent: #1FC2E4;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .8);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 32px 64px -24px rgba(0, 0, 0, .9);
    --photo-veil: rgba(8, 11, 13, .10);
    --hero-glow: rgba(31, 194, 228, .16);
  }
}