/* ═══════════════════════════════════════════════════════════════════
   RisingSwamp Design System — shared tokens + base styles
   Relight · Delight · Gilt  (Bleach + Vesper: planned)
   ═══════════════════════════════════════════════════════════════════ */

/* Brand fonts — user-uploaded Space Grotesk (400/500/700) and Space Mono (400).
   woff2 first, woff fallback; unicode-range splits keep downloads small. */

/* ── Space Grotesk · Latin ─────────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-400-normal-CJ-V5oYT.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-400-normal-BnQMeOim.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-500-normal-lFbtlQH6.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-500-normal-CNSSEhBt.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-700-normal-RjhwGPKo.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-700-normal-CwsQ-cCU.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Space Grotesk · Latin-ext ─────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext-400-normal-CfP_5XZW.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-ext-400-normal-DRPE3kg4.woff") format("woff");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext-500-normal-DUe3BAxM.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-ext-500-normal-3dgZTiw9.woff") format("woff");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext-700-normal-BQnZhY3m.woff2") format("woff2"),
       url("../fonts/space-grotesk-latin-ext-700-normal-HVCqSBdx.woff") format("woff");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Space Grotesk · Vietnamese ────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese-400-normal-B7xT_GF5.woff2") format("woff2"),
       url("../fonts/space-grotesk-vietnamese-400-normal-BIWiOVfw.woff") format("woff");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese-500-normal-BmEvtly_.woff2") format("woff2"),
       url("../fonts/space-grotesk-vietnamese-500-normal-BTqKIpxg.woff") format("woff");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese-700-normal-DMty7AZE.woff2") format("woff2"),
       url("../fonts/space-grotesk-vietnamese-700-normal-Duxec5Rn.woff") format("woff");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Space Mono · Latin + Latin-ext + Vietnamese ──────────────── */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-400-normal-Rg4St2Dn.woff2") format("woff2"),
       url("../fonts/space-mono-latin-400-normal-_3DlpgIW.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-ext-400-normal-DTLbW2xa.woff2") format("woff2"),
       url("../fonts/space-mono-latin-ext-400-normal-D4cJI_B-.woff") format("woff");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-vietnamese-400-normal-BNOj0Qhp.woff2") format("woff2"),
       url("../fonts/space-mono-vietnamese-400-normal-B0PMp_xB.woff") format("woff");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Global primitives (theme-agnostic) ─────────────────────────── */
:root {
  /* Type */
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --fs-xs: 0.85rem;
  --fs-sm: 0.95rem;
  --fs-base: 1.02rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.8rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 4rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Spacing — 8-point grid + 4px escape */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 24px;
  --sp6: 32px;
  --sp7: 48px;
  --sp8: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* Motion */
  --motion-ease-calm: cubic-bezier(0.3, 0, 0.2, 1);
  --motion-ease-organic: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 280ms;

  /* Accent token naming — components reference --accent only */
  /* (resolved per-theme below) */
}

/* ═══════════════════════════════════════════════════════════════════
   DELIGHT — night, the default
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="delight"] {
  color-scheme: dark;

  --bg: #0e1115;
  --bg2: #131820;
  --surface: #161b22;
  --surface2: #1c2330;
  --dim: #1e2530;
  --border: #242f3e;

  --text-primary: #e4eaf0;
  --text-secondary: #c8d4e0;
  --text-tertiary: #b4c6d6;
  --text-muted: #9ab0c2;

  --accent: #00f5ff;
  --accent-dim: rgba(0, 245, 255, 0.12);
  --accent-glow: rgba(0, 245, 255, 0.25);

  /* Plane 2 atmosphere anchor */
  --atm-x: 50%;
  --atm-y: 100%;
  --atm-1: rgba(0, 245, 255, 0.07);
  --atm-2: rgba(0, 245, 255, 0.02);

  --nav-bg: rgba(13, 17, 21, 0.92);

  /* Phenomena — Plane 2 only, never used in UI elements */
  --phen-aurora-g: #00ff88;
  --phen-aurora-v: #9b5fff;
  --phen-elmo: #b8d4ff;
  --phen-foxfire: #7fff00;
  --phen-glory: #ffcc88;

  --glow-primary: 0 0 10px var(--accent-glow),
    0 0 20px rgba(0, 245, 255, 0.12);
  --glow-text:
    0 0 5px rgba(0, 245, 255, 0.4),
    0 0 10px rgba(0, 245, 255, 0.2),
    0 0 20px rgba(0, 245, 255, 0.08);
  --focus-ring:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--accent),
    0 0 18px rgba(0, 245, 255, 0.65),
    0 0 36px rgba(0, 245, 255, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════
   RELIGHT — dawn
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="relight"] {
  color-scheme: light;

  --bg: #f0ebe0;
  --bg2: #e8e2d5;
  --surface: #ede7da;
  --surface2: #e2dbd0;
  --dim: #d8d0c4;
  --border: #c8bfb0;

  --text-primary: #1a2028;
  --text-secondary: #2e3d4f;
  --text-tertiary: #4a6070;
  --text-muted: #7a8f9e;

  --accent: #009faa;
  --accent-dim: rgba(0, 159, 170, 0.1);
  --accent-glow: rgba(0, 159, 170, 0.2);

  --atm-x: 65%;
  --atm-y: 0%;
  --atm-1: rgba(255, 200, 100, 0.18);
  --atm-2: rgba(255, 160, 60, 0.07);

  --nav-bg: rgba(240, 235, 224, 0.92);

  --phen-aurora-g: #3d9e6e;
  --phen-aurora-v: #7b6bb0;
  --phen-elmo: #6678bb;
  --phen-foxfire: #6a9400;
  --phen-glory: #c8782a;

  --glow-primary: 0 0 8px var(--accent-glow), 0 0 16px rgba(0, 159, 170, 0.1);
  --glow-text:
    0 0 5px rgba(0, 159, 170, 0.35),
    0 0 10px rgba(0, 159, 170, 0.18);
  --focus-ring:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--accent),
    0 0 14px rgba(0, 159, 170, 0.5),
    0 0 28px rgba(0, 159, 170, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   GILT — golden hour
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="gilt"] {
  color-scheme: dark;

  --bg: #16100a;
  --bg2: #1e1510;
  --surface: #241a0f;
  --surface2: #2e2115;
  --dim: #382818;
  --border: #4a3522;

  --text-primary: #f0e4cc;
  --text-secondary: #c4a882;
  --text-tertiary: #9a7e5a;
  --text-muted: #6a5840;

  --accent: #e8a020;
  --accent-dim: rgba(232, 160, 32, 0.12);
  --accent-glow: rgba(232, 160, 32, 0.32);

  --atm-x: 100%;
  --atm-y: 72%;
  --atm-1: rgba(232, 120, 20, 0.15);
  --atm-2: rgba(180, 70, 10, 0.05);

  --nav-bg: rgba(22, 16, 10, 0.92);

  /* Gilt-specific phenomena */
  --phen-firefly: #c8d040;
  --phen-ember: #e05c18;
  --phen-copper: #c87840;
  --phen-pollen: #d4a010;
  --phen-dusk-r: #c83830;
  /* Phenomena aliases — each one distinct within the golden-hour family.
     Translations: aurora→firefly swarm (green shimmer), aurora-v→dusk decay
     (red), elmo→copper (corona), foxfire→sulphur yellow (bioluminescence),
     glory→pollen (amber cloud). No two phenomena share a value. */
  --phen-aurora-g: var(--phen-firefly);
  --phen-aurora-v: var(--phen-dusk-r);
  --phen-elmo: var(--phen-copper);
  --phen-foxfire: #e8c830;
  --phen-glory: var(--phen-pollen);

  --glow-primary: 0 0 10px var(--accent-glow),
    0 0 20px rgba(232, 160, 32, 0.12);
  --glow-text:
    0 0 5px rgba(232, 160, 32, 0.4),
    0 0 10px rgba(232, 160, 32, 0.2),
    0 0 20px rgba(232, 160, 32, 0.08);
  --focus-ring:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--accent),
    0 0 18px rgba(232, 160, 32, 0.55),
    0 0 36px rgba(232, 160, 32, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════
   Base / Reset
   ═══════════════════════════════════════════════════════════════════ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-duration-slow)
      var(--motion-ease-calm),
    color var(--motion-duration-slow) var(--motion-ease-calm);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent-dim);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   Chrome — topbar + sidebar shared by every DS page
   ═══════════════════════════════════════════════════════════════════ */
.rs-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 52px 1fr;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

/* Plane 2 — ambient gradient + breathing */
.rs-plane2 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation: rs-breathe 9s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse at var(--atm-x) var(--atm-y),
    var(--atm-1) 0%,
    var(--atm-2) 45%,
    transparent 68%
  );
}
.rs-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: var(--noise-url);
  background-size: 200px 200px;
}

@keyframes rs-breathe {
  0% { opacity: 0.65; }
  100% { opacity: 1; }
}

/* Topbar */
.rs-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp5);
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 3;
}
.rs-brand {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.rs-brand-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.rs-brand-title {
  color: var(--text-primary);
}
.rs-brand-swamp {
  color: #00f5ff;
}
.rs-brand-sub {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: var(--sp3);
  border-left: 1px solid var(--border);
}

.rs-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp1);
  padding: var(--sp1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.rs-theme-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-duration-base) var(--motion-ease-organic),
    background-color var(--motion-duration-base) var(--motion-ease-organic);
}
.rs-theme-btn:hover {
  color: var(--text-primary);
}
.rs-theme-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
}
.rs-theme-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.rs-theme-btn[data-disabled="true"] {
  color: var(--text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}

/* Sidebar */
.rs-side {
  grid-column: 1;
  grid-row: 2;
  padding: var(--sp5) 0;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  position: relative;
  z-index: 2;
}
.rs-side-section {
  padding: var(--sp3) var(--sp5) var(--sp2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
}
.rs-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  height: 36px;
  padding-left: var(--sp5);
  padding-right: var(--sp4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  transition: color var(--motion-duration-base) var(--motion-ease-organic),
    background-color var(--motion-duration-base) var(--motion-ease-organic),
    border-color var(--motion-duration-base) var(--motion-ease-organic);
}
.rs-nav-item:hover {
  color: var(--text-primary);
  background: var(--dim);
}
.rs-nav-item.is-active {
  color: var(--text-primary);
  border-left-color: var(--accent);
  background: var(--accent-dim);
}
.rs-nav-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.1em;
  opacity: 0.6;
  width: 20px;
}
.is-active .rs-nav-num { opacity: 1; }

/* Main content */
.rs-main {
  grid-column: 2;
  grid-row: 2;
  padding: var(--sp7) var(--sp8) var(--sp8);
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}
.rs-page {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp7);
}
.rs-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  padding-bottom: var(--sp5);
  border-bottom: 1px solid var(--border);
}
.rs-kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rs-h1 {
  font-family: var(--sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text-primary);
}
.rs-lede {
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  max-width: 68ch;
  margin: 0;
  line-height: 1.6;
}

.rs-h2 {
  font-family: var(--sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text-primary);
}
.rs-h3 {
  font-family: var(--sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin: 0;
  color: var(--text-primary);
}

.rs-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
}
.rs-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}
.rs-section-sub {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  max-width: 72ch;
  line-height: 1.6;
  margin: 0;
}

/* Comp label (small mono uppercase section header) */
.rs-complabel {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
}
.rs-complabel .n {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Tokens / spec blocks
   ═══════════════════════════════════════════════════════════════════ */
.rs-spec {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.rs-mono { font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rs-app {
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto 1fr;
  }
  .rs-side {
    grid-column: 1;
    grid-row: 2;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp3) 0;
  }
  .rs-main {
    grid-column: 1;
    grid-row: 3;
    padding: var(--sp5);
  }
}