/* Theme V1 (feature-flagged). Active only when html[data-theme-v1="on"] is present. */
html[data-theme-v1="on"] { color-scheme: light dark; }

html[data-theme-v1="on"] {
  --bg-light: #f7fafc;
  --bg-dark: #0b1220;
  --text-light: #0b1220;
  --text-dark: #eaf2ff;
  --glass-light: rgba(255,255,255,0.70);
  --glass-dark: rgba(255,255,255,0.08);
  --accent: #0b84ff;

  /* Default (dark) token values shared across the site */
  --brand-text: #eaf2ff;
  --brand-muted: #a8c1d9;
  --glass-bg: rgba(20,36,64,0.44);
  --glass-edge: rgba(126,186,255,0.16);
  --glass-highlight: rgba(194,232,255,0.32);
  --now-k-color: rgba(168,193,217,0.75);
  --now-updated-color: rgba(168,193,217,0.78);
}

@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) {
    --brand-text: #0b1620;
    --brand-muted: #42536a;
    --glass-bg: rgba(236,243,255,0.78);
    --glass-edge: rgba(15,34,66,0.12);
    --glass-highlight: rgba(255,255,255,0.56);
    --now-k-color: #4a5d75;
    --now-updated-color: #51657c;
  }

  html[data-theme-v1="on"]:not([data-theme="dark"]) .badge b {
    color: var(--brand-text);
  }

  html[data-theme-v1="on"]:not([data-theme="dark"]) .badge {
    background:
      radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--badge-green-500) 20%, transparent), rgba(255,255,255,0) 55%),
      linear-gradient(180deg,
        color-mix(in oklab, var(--badge-green-50) 82%, rgba(255,255,255,0.65)),
        color-mix(in oklab, var(--badge-green-500) 38%, rgba(11,22,32,0.18)));
    border: 1px solid color-mix(in oklab, var(--badge-green-500) 34%, rgba(11,22,32,0.16));
    color: var(--brand-text);
  }
}

html[data-theme-v1="on"][data-theme="light"] {
  --brand-text: #0b1620;
  --brand-muted: #42536a;
  --glass-bg: rgba(236,243,255,0.78);
  --glass-edge: rgba(15,34,66,0.12);
  --glass-highlight: rgba(255,255,255,0.56);
  --now-k-color: #4a5d75;
  --now-updated-color: #51657c;
}

html[data-theme-v1="on"][data-theme="light"] .badge b {
  color: var(--brand-text);
}

html[data-theme-v1="on"][data-theme="light"] .badge {
  background:
    radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--badge-green-500) 20%, transparent), rgba(255,255,255,0) 55%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--badge-green-50) 82%, rgba(255,255,255,0.65)),
      color-mix(in oklab, var(--badge-green-500) 38%, rgba(11,22,32,0.18)));
  border: 1px solid color-mix(in oklab, var(--badge-green-500) 34%, rgba(11,22,32,0.16));
  color: var(--brand-text);
}

/* Auto theme: follows prefers-color-scheme when user hasn't forced a theme */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) body {
    background: #0b58a0 linear-gradient(180deg,#0b58a0 0%,#0b3d7a 100%);
    color: var(--text-dark);
  }
  html[data-theme-v1="on"]:not([data-theme="light"]) .glass-card { background: var(--glass-dark); }
}
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) body {
    background: linear-gradient(180deg,#fdfdfd 0%, #f2f6fb 100%);
    color: var(--text-light);
  }
  html[data-theme-v1="on"]:not([data-theme="dark"]) .glass-card { background: var(--glass-light); backdrop-filter: saturate(120%) blur(12px); -webkit-backdrop-filter: saturate(120%) blur(12px); }
  html[data-theme-v1="on"]:not([data-theme="dark"]) body.resume-page {
    background:
      radial-gradient(1400px 900px at 20% -10%, rgba(16,213,138,0.25), rgba(255,255,255,0) 65%),
      radial-gradient(1200px 840px at 115% 5%, rgba(61,165,255,0.22), rgba(255,255,255,0) 65%),
      linear-gradient(180deg,#ffffff 0%, #eef4fb 100%);
    color: var(--text-light);
  }
}

/* Forced overrides */
html[data-theme-v1="on"][data-theme="light"] body {
  background: linear-gradient(180deg,#ffffff 0%, #f2f6fb 100%);
  color: var(--text-light);
}
html[data-theme-v1="on"][data-theme="light"] .glass-card { background: var(--glass-light); }

html[data-theme-v1="on"][data-theme="light"] body.resume-page {
  background:
    radial-gradient(1400px 900px at 20% -10%, rgba(16,213,138,0.25), rgba(255,255,255,0) 65%),
    radial-gradient(1200px 840px at 115% 5%, rgba(61,165,255,0.22), rgba(255,255,255,0) 65%),
    linear-gradient(180deg,#ffffff 0%, #eef4fb 100%);
  color: var(--text-light);
}

html[data-theme-v1="on"][data-theme="dark"] body {
  background: #0b58a0 linear-gradient(180deg,#0b58a0 0%,#0b3d7a 100%);
  color: var(--text-dark);
}
html[data-theme-v1="on"][data-theme="dark"] .glass-card { background: var(--glass-dark); }

/* Links & CTAs */
html[data-theme-v1="on"][data-theme="light"] a { color: #0b58a0; }
html[data-theme-v1="on"][data-theme="dark"] a { color: #8ecaff; }

/* Toggle control (only visible when flag is on) */

@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-toggle {
    background: rgba(20,24,36,0.65); color: #eaf2ff; border: 1px solid rgba(255,255,255,.12);
  }
}
html[data-theme-v1="on"][data-theme="dark"] .theme-toggle {
  background: rgba(20,24,36,0.65); color: #eaf2ff; border: 1px solid rgba(255,255,255,.12);
}

@media (prefers-reduced-motion: reduce) {
  
}

/* Header theme switch (top-right), two-state light/dark */
html[data-theme-v1="on"] .theme-switch {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.85);
  color: #0b1220; font-size: 12px; line-height: 1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 100;
}
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-switch {
    background: rgba(20,24,36,.65); color: #eaf2ff; border-color: rgba(255,255,255,.12);
  }
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch {
  background: rgba(20,24,36,.65); color: #eaf2ff; border-color: rgba(255,255,255,.12);
}
html[data-theme-v1="on"] .theme-switch button {
  appearance: none; border: 0; background: transparent; color: inherit;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
html[data-theme-v1="on"] .theme-switch .pill {
  width: 36px; height: 20px; border-radius: 999px; position: relative;
  background: rgba(0,0,0,.2);
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .pill { background: rgba(255,255,255,.25); }
html[data-theme-v1="on"] .theme-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .knob {
  transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-v1="on"] .theme-switch .knob { transition: none; }
}

/* Header theme switch — fixed top-right under safe-area; true toggle look */
html[data-theme-v1="on"] .theme-switch {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.85);
  color: #0b1220; font-size: 12px; line-height: 1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 9999;
}
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-switch {
    background: rgba(20,24,36,.65); color: #eaf2ff; border-color: rgba(255,255,255,.12);
  }
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch {
  background: rgba(20,24,36,.65); color: #eaf2ff; border-color: rgba(255,255,255,.12);
}
html[data-theme-v1="on"] .theme-switch button {
  appearance: none; border: 0; background: transparent; color: inherit;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
/* Real switch */
html[data-theme-v1="on"] .theme-switch .pill {
  width: 44px; height: 24px; border-radius: 999px; position: relative;
  background: rgba(0,0,0,.2);
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .pill { background: rgba(255,255,255,.25); }
html[data-theme-v1="on"] .theme-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .knob { transform: translateX(20px); }

html[data-theme-v1="on"] .theme-switch .icon { font-size: 14px; opacity: .85; }
html[data-theme-v1="on"] .theme-switch .label { display: none; } /* hide text label to keep compact */

@media (prefers-reduced-motion: reduce) {
  html[data-theme-v1="on"] .theme-switch .knob { transition: none; }
}

/* --- Theme Switch: micro size + Liquid Glass + auto-hide --- */
html[data-theme-v1="on"] .theme-switch {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.55);
  color: #0b1220; font-size: 11px;
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  backdrop-filter: saturate(120%) blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 0 0.5px rgba(255,255,255,.6);
  z-index: 9999;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-switch {
    background: rgba(20,24,36,.55); color: #eaf2ff; border-color: rgba(255,255,255,.15);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 0.5px rgba(255,255,255,.18);
  }
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch {
  background: rgba(20,24,36,.55); color: #eaf2ff; border-color: rgba(255,255,255,.15);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 0.5px rgba(255,255,255,.18);
}
html[data-theme-v1="on"] .theme-switch button {
  appearance: none; border: 0; background: transparent; color: inherit;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
/* Micro switch */
html[data-theme-v1="on"] .theme-switch .pill {
  width: 32px; height: 18px; border-radius: 999px; position: relative;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 1px rgba(255,255,255,.25);
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .pill { background: rgba(255,255,255,.25); }
html[data-theme-v1="on"] .theme-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
html[data-theme-v1="on"][data-theme="dark"] .theme-switch .knob { transform: translateX(14px); }
html[data-theme-v1="on"] .theme-switch .icon { font-size: 12px; opacity: .9; }
html[data-theme-v1="on"] .theme-switch .label { display: none; }

/* Hidden state */
html[data-theme-v1="on"] .theme-switch.theme-switch--hidden {
  opacity: 0; transform: translateY(-6px); pointer-events: none; filter: blur(1px);
}

/* Reveal hotspot (tiny tap/cursor area at top-right when hidden) */
html[data-theme-v1="on"] .theme-reveal-hotspot {
  position: fixed;
  right: 0; top: 0;
  width: 28px; height: 28px;
  z-index: 9998;
  background: transparent;
  pointer-events: auto;
}
html[data-theme-v1="on"] .theme-reveal-hotspot.hidden { pointer-events: none; }

/* Rounded focus style for theme switch (keyboard/tab) */
html[data-theme-v1="on"] .theme-switch button:focus { outline: none; }
html[data-theme-v1="on"] .theme-switch button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,132,255,.40), 0 0 0 6px rgba(255,255,255,.35);
  border-radius: 999px;
}
/* Also ensure pill reflects a soft glow when focused for better visibility */
html[data-theme-v1="on"] .theme-switch button:focus-visible .pill {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 1px rgba(255,255,255,.25), 0 0 0 3px rgba(11,132,255,.50);
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-switch button:focus-visible {
    box-shadow: 0 0 0 3px rgba(142,202,255,.45), 0 0 0 6px rgba(20,24,36,.65);
  }
  html[data-theme-v1="on"]:not([data-theme="light"]) .theme-switch button:focus-visible .pill {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.22), 0 0 0 3px rgba(142,202,255,.55);
  }
}


/* Auto/Dark-mode (not forced light) */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .glass-card p:first-of-type {
    color: rgba(245,245,245,0.92);
  }
}
/* Auto/Light-mode (not forced dark) */
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .glass-card p:first-of-type {
    color: rgba(12,18,32,0.72);
  }
}

/* Forced overrides */
html[data-theme-v1="on"][data-theme="dark"] .glass-card p:first-of-type {
  color: rgba(245,245,245,0.92);
}
html[data-theme-v1="on"][data-theme="light"] .glass-card p:first-of-type {
  color: rgba(12,18,32,0.72);
}


/* Auto/Dark (not forced light) */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) :is(.text-muted,.muted,.subtext,.subtitle,.intro,.lede,.eyebrow,small,.small,.caption) {
    color: rgba(245,245,245,0.92);
  }
}
/* Auto/Light (not forced dark) */
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) :is(.text-muted,.muted,.subtext,.subtitle,.intro,.lede,.eyebrow,small,.small,.caption) {
    color: rgba(12,18,32,0.72);
  }
}

/* Forced overrides */
html[data-theme-v1="on"][data-theme="dark"] :is(.text-muted,.muted,.subtext,.subtitle,.intro,.lede,.eyebrow,small,.small,.caption) {
  color: rgba(245,245,245,0.92);
}
html[data-theme-v1="on"][data-theme="light"] :is(.text-muted,.muted,.subtext,.subtitle,.intro,.lede,.eyebrow,small,.small,.caption) {
  color: rgba(12,18,32,0.72);
}

/* Keep glass-card lead paragraph rule (from 21a) */


/* 1) Header nav links: make readable in both themes */
html[data-theme-v1="on"]:not([data-theme="dark"]) header nav a,
html[data-theme-v1="on"]:not([data-theme="dark"]) .site-header nav a {
  color: rgba(234,242,255,0.96);
}
html[data-theme-v1="on"][data-theme="dark"] header nav a,
html[data-theme-v1="on"][data-theme="dark"] .site-header nav a {
  color: rgba(234,242,255,0.96);
}
/* Hover/Focus brighter */
html[data-theme-v1="on"] header nav a:hover,
html[data-theme-v1="on"] header nav a:focus,
html[data-theme-v1="on"] .site-header nav a:hover,
html[data-theme-v1="on"] .site-header nav a:focus {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,.25);
  outline: none;
}

/* 2) Eyebrow accent (small caps line above H1 inside hero/cards) */
html[data-theme-v1="on"] .eyebrow { letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
/* Light theme: bluish accent, medium contrast */
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .eyebrow { color: rgba(21,112,239,0.75); }
}
/* Dark theme: brighter cyan accent */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .eyebrow { color: rgba(125,211,252,0.90); }
}
/* Forced overrides */
html[data-theme-v1="on"][data-theme="light"] .eyebrow { color: rgba(21,112,239,0.75); }
html[data-theme-v1="on"][data-theme="dark"] .eyebrow { color: rgba(125,211,252,0.90); }

/* 3) Fix purple rectangle (native focus outline) around theme toggle */
html[data-theme-v1="on"] .theme-switch,
html[data-theme-v1="on"] .theme-switch * { outline: none !important; -webkit-tap-highlight-color: transparent; }
/* Replace with rounded Liquid Glass halo on keyboard focus */
html[data-theme-v1="on"] .theme-switch button:focus-visible {
  box-shadow: 0 0 0 2px rgba(11,132,255,.35), 0 0 0 5px rgba(255,255,255,.25);
  border-radius: 999px;
}

:root {
  --eyebrow-orange-light: #d65f0e; /* darkened orange for light theme (accessibility) */
  --eyebrow-orange-dark:  #f97316; /* brighter orange for dark theme */
}
/* Base eyebrow typography (already exists; ensure in case) */
html[data-theme-v1="on"] .eyebrow { letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
/* Auto/Light (not forced dark) */
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .eyebrow { color: var(--eyebrow-orange-light); }
}
/* Auto/Dark (not forced light) */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .eyebrow { color: var(--eyebrow-orange-dark); }
}
/* Forced overrides */
html[data-theme-v1="on"][data-theme="light"] .eyebrow { color: var(--eyebrow-orange-light); }
html[data-theme-v1="on"][data-theme="dark"] .eyebrow  { color: var(--eyebrow-orange-dark); }

:root {
  --eyebrow-orange-light: #d65f0e;
  --eyebrow-orange-dark:  #f97316;
}
/* Auto/Light */
@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .glass-card .eyebrow { 
    color: var(--eyebrow-orange-light) !important; 
  }
}
/* Auto/Dark */
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .glass-card .eyebrow { 
    color: var(--eyebrow-orange-dark) !important; 
  }
}
/* Forced overrides */
html[data-theme-v1="on"][data-theme="light"] .glass-card .eyebrow { 
  color: var(--eyebrow-orange-light) !important; 
}
html[data-theme-v1="on"][data-theme="dark"] .glass-card .eyebrow { 
  color: var(--eyebrow-orange-dark) !important; 
}

@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .glass-card [class*="eyebrow"] { color: var(--eyebrow-orange-light) !important; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme-v1="on"]:not([data-theme="light"]) .glass-card [class*="eyebrow"] { color: var(--eyebrow-orange-dark) !important; }
}
html[data-theme-v1="on"][data-theme="light"] .glass-card [class*="eyebrow"] { color: var(--eyebrow-orange-light) !important; }
html[data-theme-v1="on"][data-theme="dark"]  .glass-card [class*="eyebrow"] { color: var(--eyebrow-orange-dark) !important; }