/* Eidolon brand tokens. Source of truth: the brand kit tokens.json. Type and colour follow the brand
   document (direction A, "field notes"); mood palettes are the contract's own (MoodSvg.palette) and are
   never used for UI. */
:root {
  /* colour, light */
  --paper: #f3eee4;
  --ink: #15171c;
  --ink-2: #5a5f6b;
  --rule: #cfc8ba;
  --accent: #2434d9;
  --plate-bg: #f3eee4;

  /* mood palettes (bg, body, ink) straight from MoodSvg.sol; the creature only */
  --mood-calm-bg: #cfeee8; --mood-calm-body: #5fc7b4; --mood-calm-ink: #1f5c52;
  --mood-happy-bg: #ffe9a8; --mood-happy-body: #ffb23e; --mood-happy-ink: #7a3f00;
  --mood-nervous-bg: #e4dcf5; --mood-nervous-body: #b9a6e8; --mood-nervous-ink: #3f3070;
  --mood-angry-bg: #ffd0c4; --mood-angry-body: #e5483a; --mood-angry-ink: #5c1006;
  --mood-sleeping-bg: #1c2440; --mood-sleeping-body: #56658f; --mood-sleeping-ink: #0b1022;
  --mark-gold: #ffd54a; /* antenna tip and level-16 ring, from the contract */

  /* type families (self-hosted latin subsets, OFL) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-text: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, Menlo, monospace;

  /* display: Fraunces 420, opsz 144, SOFT 60, WONK 1 */
  --display-weight: 420;
  --display-variation: 'opsz' 144, 'SOFT' 60, 'WONK' 1;
  --display-tracking: -0.02em;
  --display-leading: 0.98;
  --size-hero: clamp(44px, 7vw, 104px);
  --size-h2: clamp(30px, 3.6vw, 52px);

  /* lede: Fraunces 400, opsz 20, SOFT 30, WONK 0 */
  --lede-variation: 'opsz' 20, 'SOFT' 30, 'WONK' 0;
  --size-lede: clamp(19px, 1.6vw, 22px);
  --lede-leading: 1.4;

  /* body and UI: Hanken Grotesk */
  --size-body: 17px;
  --size-body-small: 16px; /* at 360px */
  --body-leading: 1.55;
  --measure: 38em;
  --weight-strong: 600;
  --size-ui: 15px;
  --weight-ui: 500;

  /* data and labels: Martian Mono */
  --size-data: 13px;
  --data-tracking: 0.02em;
  --data-leading: 1.7;
  --size-label: 11px;
  --label-tracking: 0.08em;

  /* layout */
  --gutter-360: 16px;
  --gutter: 24px;
  --content-max: 1200px;
  --radius-plate: 14px;
  --radius-plate-inner: 10px;
  --plate-pad: 8px;
  --hairline: 1px;

  /* motion */
  --motion-crossfade: 240ms;
  --motion-dip: 320ms;
  --motion-hover: 160ms;
  --motion-breathe: 4.8s;

  /* logo */
  --logo-clear-space: 0.18; /* fraction of the mark height, every side */
  --logo-min-mark: 16px;
  --logo-min-lockup-width: 120px;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper: #15171c;
    --ink: #f3eee4;
    --ink-2: #a9aeb8;
    --rule: #2b2f37;
    --accent: #8f9bff;
    --plate-bg: #15171c;
  }
}
:root[data-theme="dark"] {
  --paper: #15171c;
  --ink: #f3eee4;
  --ink-2: #a9aeb8;
  --rule: #2b2f37;
  --accent: #8f9bff;
  --plate-bg: #15171c;
}