/*
 * Clef design tokens. Values are taken from clef.agency so the panel reads as
 * the same studio: deep navy, warm paper, and the brass of the seal.
 *
 * Typefaces are set in ONE place: the three --font-* variables below.
 * To change a typeface, change the variable (and the @font-face rule).
 *
 * Text colours are solid values so their contrast can be checked:
 * test/contrast.test.ts fails the build if a pair drops below WCAG AA.
 */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Typefaces: swap here, nowhere else. */
  --font-serif: "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Brand constants (same in both themes). */
  --navy: #0e1a30;
  --navy-deep: #0a1424;
  --paper: #f4f1ea;
  --brass: #d0ae6e;
  --brass-hi: #e4cb98;
  --brass-ink: #7c5f2c;

  --radius-s: 8px;
  --radius: 14px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark theme: the default. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1a30;
  --bg-deep: #0a1424;
  --surface: #14233d;
  --surface-2: #1a2b48;
  --text: #f3efe6;
  --text-2: #a9b2c3;
  --text-3: #8c95a8;
  --line: rgba(233, 226, 210, 0.12);
  --line-strong: rgba(233, 226, 210, 0.24);
  --accent: #d0ae6e;
  --accent-hi: #e4cb98;
  --on-accent: #0b1526;
  --ok: #9ec7a6;
  --danger: #e8a08c;
  --hover: rgba(243, 239, 230, 0.06);
}

/* Light theme: the same palette, turned over. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --bg-deep: #e9e4d9;
  --surface: #fbf9f4;
  --surface-2: #efebe1;
  --text: #101a2d;
  --text-2: #4b5468;
  --text-3: #5d6678;
  --line: rgba(16, 26, 45, 0.13);
  --line-strong: rgba(16, 26, 45, 0.28);
  --accent: #7c5f2c;
  --accent-hi: #634a1f;
  --on-accent: #f4f1ea;
  --ok: #2f6b3f;
  --danger: #a3402a;
  --hover: rgba(16, 26, 45, 0.05);
}