/* Design tokens — dark (default) and light themes via data-theme */

html.theme-dark,
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #001D21;
  --bg-image:
    radial-gradient(ellipse 85% 42% at 50% -8%, rgba(8, 82, 78, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 48% 32% at 90% 48%, rgba(8, 82, 78, 0.11) 0%, transparent 50%),
    radial-gradient(ellipse 38% 28% at 8% 82%, rgba(8, 82, 78, 0.08) 0%, transparent 48%);
  --sf: #021F22;
  --sf2: #032528;
  --sf3: #001D21;
  --b1: rgba(228, 184, 174, 0.14);
  --b2: rgba(228, 184, 174, 0.24);
  --bn: rgba(255, 255, 255, 0.07);
  --bn2: rgba(255, 255, 255, 0.12);

  --gold: #E4B8AE;
  --gdim: rgba(228, 184, 174, 0.1);
  --gdim2: rgba(228, 184, 174, 0.05);
  --on-gold: #001D21;

  --teal: #0ECFB4;
  --teal-bg: rgba(14, 207, 180, 0.08);
  --teal-border: rgba(14, 207, 180, 0.35);
  --teal-border-mid: rgba(14, 207, 180, 0.32);
  --teal-border-soft: rgba(14, 207, 180, 0.28);
  --teal-border-light: rgba(14, 207, 180, 0.22);
  --teal-border-strong: rgba(14, 207, 180, 0.52);
  --teal-hover-bg: rgba(14, 207, 180, 0.12);
  --teal-quote-bg: rgba(14, 207, 180, 0.05);
  --tdim: rgba(14, 207, 180, 0.08);
  --tdim2: rgba(14, 207, 180, 0.04);
  --on-teal: #001D21;

  --red: #E05A2A;
  --rdim: rgba(224, 90, 42, 0.08);
  --purple: #8B6FBE;
  --pdim: rgba(139, 111, 190, 0.08);

  --logo-gold: #E4B8AE;
  --logo-gold-light: #F2D4CC;
  --logo-gold-deep: #C48E84;
  --nav-hsei-logo: var(--teal);

  --amber: #E4B8AE;
  --amber-bg: rgba(228, 184, 174, 0.08);
  --amber-border: rgba(228, 184, 174, 0.25);
  --callout-bg: rgba(228, 184, 174, 0.07);
  --callout-border: rgba(228, 184, 174, 0.2);

  --tx: rgba(255, 255, 255, 0.92);
  --tx2: rgba(255, 255, 255, 0.84);
  --tx3: rgba(255, 255, 255, 0.72);
  --tx4: rgba(255, 255, 255, 0.12);
  --rose-gold: #E4B8AE;
  --rose-border: rgba(228, 184, 174, 0.28);
  --rose-border-soft: rgba(228, 184, 174, 0.18);

  --nav-bg: rgba(0, 29, 33, 0.88);
  --tagline-muted: rgba(255, 255, 255, 0.58);
  --footer-border: rgba(228, 184, 174, 0.14);
  --footer-small: rgba(255, 255, 255, 0.38);
  --shadow-elevated: rgba(0, 0, 0, 0.38);
  --overlay: rgba(6, 20, 16, 0.72);

  --creator-grad-start: rgba(14, 207, 180, 0.85);
  --creator-grad-end: rgba(14, 207, 180, 0.22);
  --creator-border: rgba(14, 207, 180, 0.38);

  --error: #f87171;
  --error-soft: #e07080;
  --error-bg: #8b1e2d;
  --error-border: #a82838;
}

html.theme-light,
html[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F5F2;
  --bg-image: none;
  --sf: #FFFFFF;
  --sf2: #F0EDE8;
  --sf3: #E8E4DE;
  --bn: rgba(10, 48, 51, 0.06);
  --bn2: rgba(10, 48, 51, 0.12);
  --gold: #E4B8AE;
  --gdim: rgba(228, 184, 174, 0.1);
  --gdim2: rgba(228, 184, 174, 0.05);
  --on-gold: #001D21;
  --tdim: rgba(10, 48, 51, 0.06);
  --tdim2: rgba(10, 48, 51, 0.03);
  --red: #C44A20;
  --rdim: rgba(196, 74, 32, 0.08);
  --purple: #6B52A0;
  --pdim: rgba(107, 82, 160, 0.08);
  --b1: rgba(10, 48, 51, 0.08);
  --b2: rgba(10, 48, 51, 0.16);

  --teal: #0A3033;
  --teal-bg: rgba(10, 48, 51, 0.06);
  --teal-border: rgba(10, 48, 51, 0.38);
  --teal-border-mid: rgba(10, 48, 51, 0.32);
  --teal-border-soft: rgba(10, 48, 51, 0.26);
  --teal-border-light: rgba(10, 48, 51, 0.22);
  --teal-border-strong: rgba(10, 48, 51, 0.48);
  --teal-hover-bg: rgba(10, 48, 51, 0.1);
  --teal-quote-bg: rgba(10, 48, 51, 0.04);
  --on-teal: #F7F5F2;

  --logo-gold: #E4B8AE;
  --logo-gold-light: #F2D4CC;
  --logo-gold-deep: #C48E84;
  --nav-hsei-logo: var(--teal);

  --amber: #E4B8AE;
  --amber-bg: rgba(228, 184, 174, 0.1);
  --amber-border: rgba(228, 184, 174, 0.28);
  --callout-bg: rgba(228, 184, 174, 0.08);
  --callout-border: rgba(228, 184, 174, 0.22);

  --tx: #1A2426;
  --tx2: rgba(26, 36, 38, 0.72);
  --tx3: rgba(26, 36, 38, 0.48);
  --rose-gold: #E4B8AE;
  --rose-border: rgba(228, 184, 174, 0.32);
  --rose-border-soft: rgba(228, 184, 174, 0.2);

  --nav-bg: rgba(247, 245, 242, 0.92);
  --tagline-muted: rgba(10, 48, 51, 0.22);
  --footer-border: rgba(10, 48, 51, 0.08);
  --footer-small: rgba(10, 48, 51, 0.42);
  --shadow-elevated: rgba(10, 48, 51, 0.12);
  --overlay: rgba(10, 48, 51, 0.45);

  --creator-grad-start: rgba(10, 48, 51, 0.88);
  --creator-grad-end: rgba(10, 48, 51, 0.28);
  --creator-border: rgba(10, 48, 51, 0.35);

  --error: #c53030;
  --error-soft: #b91c1c;
  --error-bg: #7f1d1d;
  --error-border: #991b1b;
}

:root {
  /* ── Font stacks ── */
  --font-main: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", SFMono-Regular, ui-monospace, Menlo, Monaco, "Courier New", monospace;
  --font-mono-weight: 600;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: var(--font-main);
  --font-ui: var(--font-main);

  /* ── Type scale ── */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: clamp(2rem, 5vw, 52px);
  --text-article: var(--text-base);

  /* ── Line heights ── */
  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --leading-relaxed: 1.75;

  /* ── Text colors (theme-aware via --tx) ── */
  --text-primary: var(--tx);
  --text-secondary: var(--tx2);
  --text-muted: var(--tx3);

  /* ── UI scale aliases ── */
  --text-ui-xs: var(--text-xs);
  --text-ui-sm: var(--text-sm);
  --text-ui-md: var(--text-md);
  --tracking-ui-tight: 0.03em;
  --tracking-ui: 0.04em;
  --tracking-ui-wide: 0.08em;
  --text-ui-muted: var(--text-secondary);
}

@media (min-width: 768px) {
  :root {
    --text-base: 17px;
    --text-article: var(--text-base);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-base: 18px;
    --text-article: var(--text-base);
  }
}

/* ── Global typography defaults ── */
a,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

p {
  font-family: var(--font-main);
  font-size: var(--text-article);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* Typography hierarchy — content areas */
.type-prose h1,
.type-prose h2,
.type-prose h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.type-prose h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.type-prose h2 {
  font-size: var(--text-2xl);
  margin: 2.5rem 0 1rem;
}

.type-prose h3 {
  font-size: var(--text-xl);
  margin: 2rem 0 0.75rem;
}

.type-prose p {
  font-family: var(--font-main);
  font-size: var(--text-article);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.type-prose em {
  color: var(--text-primary);
  font-style: italic;
}

.type-prose strong {
  color: var(--text-primary);
  font-weight: 500;
}

.text-mono,
.mono-text,
.status-text,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-ui-tight);
}

.ui-cap {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-ui-wide);
}

.ui-text {
  font-family: var(--font-ui);
}

html.theme-dark body,
html[data-theme="dark"] body {
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-size: cover;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    transition: background-color 0.35s ease, color 0.35s ease;
  }

  body,
  nav,
  .auth-card,
  .article-card,
  .program-card,
  .selection-menu {
    transition:
      background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }
}