/*
 * Design tokens, mirrored from sapling.cash so this page reads as part of the same product.
 * The palette is cyanotype chemistry: prussian exposures, silhouette whites, toner gold for ZEC.
 */

@font-face {
  font-family: "IM Fell English";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/im-fell-english-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/spline-sans-mono.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* raw palette (same names as sapling.cash) */
  --prussian-night: #11153f;
  --prussian: #161b52;
  --exposure: #1f2766;
  --atkins: #262f80;
  --faded-plate: #454a86;
  --silhouette: #d9dfee;
  --salt: #9aa3cf;
  --washed-paper: #f1f3f9;
  --toner-gold: #e9b84a;
  --toner-deep: #8a5d06;
  --verdigris: #52d3a6;
  --rust: #ff7466;
  --ferric: #d6d6a0;

  /* roles */
  --bg: var(--prussian-night);
  --surface: var(--prussian);
  --raised: var(--exposure);
  --plate: var(--atkins);
  --border: var(--faded-plate);
  --border-soft: var(--exposure);
  --text: var(--silhouette);
  --text-muted: var(--salt);
  --zec: var(--toner-gold);
  --stage-seed: var(--ferric);
  --stage-sapling: var(--verdigris);
  --stage-orchard: var(--silhouette);
  --btn-primary-bg: var(--silhouette);
  --btn-primary-text: var(--prussian);
  --focus: var(--toner-gold);
  --plate-paper: #e8ebf3;

  /* type */
  --font-display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --font-ui: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --display-sm: 26px;
  --display-md: 40px;
  --display-lg: 52px;

  /* space and motion */
  --radius: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --ease-expose: cubic-bezier(.3, .1, .2, 1);
  --dur-expose: 2.6s;
  --dur-ui: .14s;

  --wrap: 1200px;
  --gutter: 24px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--washed-paper);
  --surface: #e6eaf4;
  --raised: #fff;
  --border: #b9c1dc;
  --border-soft: #d5dbeb;
  --text: var(--prussian);
  --text-muted: #4a5290;
  --zec: var(--toner-deep);
  --stage-seed: #6b6b1f;
  --stage-sapling: #0e7a57;
  --stage-orchard: var(--prussian);
  --btn-primary-bg: var(--prussian);
  --btn-primary-text: var(--washed-paper);
  --focus: var(--toner-deep);
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --display-md: 32px;
    --display-lg: 40px;
  }
}