@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --page-bg: #e9e8e4;
  --page-pad: 70px 76px 150px;
  --frame-radius: 6px;

  --txt: #1a1a1c;
  --txt-2: #33343a;
  --muted: #5a5c62;
  --muted-2: #6b6d73;
  --faint: #85878d;
  --faint-2: #9a9ca2;
  --surface: #f5f4f1;
  --surface-2: #ecebe6;
  --surface-3: #efeee9;
  --surface-4: #e7e6e0;
  --line: rgba(22, 22, 26, 0.12);
  --line-2: rgba(22, 22, 26, 0.18);

  --accent: #f3a738;
  --accent-hi: #f9d69b;
  --accent-dp: #c1841f;
  --accent-rgb: 243, 167, 56;
  --on-accent: #241803;
  --accent-grad: linear-gradient(180deg, var(--accent-hi), var(--accent) 46%, var(--accent-dp));
  --accent-glow: rgba(var(--accent-rgb), 0.10);
  --accent-line: rgba(var(--accent-rgb), 0.42);
  --accent-faint: rgba(var(--accent-rgb), 0.26);

  --font-display: "Bodoni Moda", Georgia, serif;
  --font-instrument: "Instrument Serif", Georgia, serif;
  --font-body-serif: "Newsreader", Georgia, serif;
  --font-mono-korum: "IBM Plex Mono", "JetBrains Mono", monospace;
  --radius-frame: 6px;
  --radius-panel: 5px;
  --radius-control: 3px;
  --motion-fast: 0.15s ease;
  --motion-med: 0.2s ease;

  /* Compatibility aliases for older KORUM surfaces. */
  --bg-primary: #17181c;
  --bg-secondary: #212329;
  --bg-tertiary: #2b2d33;
  --text-primary: #fcfcfb;
  --text-secondary: #d3d4d8;
  --text-tertiary: #9b9da3;
  --border-color: rgba(255, 255, 255, 0.08);
  --accent-gold: var(--accent);
  --accent-gold-light: var(--accent-hi);
  --accent-gold-dark: var(--accent-dp);
  --font-head: var(--font-display);
}

.korum-theme-dark,
[data-korum-surface="dark"] {
  --txt: #fcfcfb;
  --txt-2: #d3d4d8;
  --muted: #9b9da3;
  --muted-2: #82858c;
  --faint: #63656c;
  --faint-2: #52545a;
  --surface: #17181c;
  --surface-2: #212329;
  --surface-3: #2b2d33;
  --surface-4: #34363d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  color: var(--txt);
}

.korum-theme-grey,
[data-korum-surface="grey"] {
  --muted: #232529;
  --muted-2: #2d2f37;
  --faint: #383b44;
  --faint-2: #585b65;
  --surface: #d0d1d5;
  --surface-2: #fcfcfd;
  --surface-3: #e4e5e8;
  --surface-4: #d8d9dd;
  --line: rgba(20, 20, 24, 0.13);
  --line-2: rgba(20, 20, 24, 0.17);
}

@keyframes korumBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}