/* Keen Concepts — design language 1.0. Source palette preserved. */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Brand primitives. Components consume semantic tokens below. */
  --keen-ink: #12161d;
  --keen-paper: #eef0f2;
  --keen-gold: #c98a34;
  --keen-gold-dark: #e0a752;
  --keen-gold-soft: #e9c68a;
  --keen-teal: #3f8f8a;
  --keen-teal-dark: #5aada7;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1rem;
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-h3: clamp(1.375rem, 2.4vw, 1.875rem);
  --text-h2: clamp(1.875rem, 3.5vw, 3rem);
  --text-display: clamp(2.5rem, 5.2vw, 4.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --content-width: 76rem;
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-space: clamp(3rem, 6vw, 6rem);
  --radius-control: 3px;
  --radius-panel: 4px;
  --duration-fast: 150ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

/* Light is the CSS fallback. No JS is needed to follow the system. */
:root {
  color-scheme: light;
  --page: var(--keen-paper);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #161b22;
  --text-muted: #566072;
  --line: rgba(18, 22, 29, .18);
  --control-border: #566072;
  --accent: var(--keen-gold);
  --accent-hover: var(--keen-gold-soft);
  --secondary: var(--keen-teal);
  --accent-label: var(--text);
  --link: var(--text);
  --focus: var(--keen-ink);
  --on-accent: var(--keen-ink);
  --logo-light-display: block;
  --logo-dark-display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --page: #12161d;
    --surface: #161c24;
    --surface-raised: #1e2530;
    --text: #e7e9ec;
    --text-muted: #98a1b0;
    --line: rgba(238, 240, 242, .2);
    --control-border: #98a1b0;
    --accent: var(--keen-gold-dark);
    --accent-hover: var(--keen-gold-soft);
    --secondary: var(--keen-teal-dark);
    --accent-label: var(--keen-gold-dark);
    --link: #e7e9ec;
    --focus: var(--keen-gold-dark);
    --on-accent: var(--keen-ink);
    --logo-light-display: none;
    --logo-dark-display: block;
  }
}

/* Explicit choices override OS preferences; don't combine with the media query. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #12161d;
  --surface: #161c24;
  --surface-raised: #1e2530;
  --text: #e7e9ec;
  --text-muted: #98a1b0;
  --line: rgba(238, 240, 242, .2);
  --control-border: #98a1b0;
  --accent: var(--keen-gold-dark);
  --accent-hover: var(--keen-gold-soft);
  --secondary: var(--keen-teal-dark);
  --accent-label: var(--keen-gold-dark);
  --link: #e7e9ec;
  --focus: var(--keen-gold-dark);
  --on-accent: var(--keen-ink);
  --logo-light-display: none;
  --logo-dark-display: block;
}

/* The process band stays ink in either theme; its descendants get full tokens. */
.theme-ink {
  color-scheme: dark;
  --page: #12161d;
  --surface: #161c24;
  --surface-raised: #1e2530;
  --text: #e7e9ec;
  --text-muted: #98a1b0;
  --line: rgba(238, 240, 242, .2);
  --control-border: #98a1b0;
  --accent: var(--keen-gold-dark);
  --accent-hover: var(--keen-gold-soft);
  --secondary: var(--keen-teal-dark);
  --accent-label: var(--keen-gold-dark);
  --link: #e7e9ec;
  --focus: var(--keen-gold-dark);
  --on-accent: var(--keen-ink);
  --logo-light-display: none;
  --logo-dark-display: block;
  background: var(--page);
  color: var(--text);
}