/* :root is the light palette; body.palette-dark overrides it and is the one in
   use. Keep :root even so — the dark palette only redefines, it does not define. */
:root{
  --paper:        #F1F3EB;
  --paper-deep:   #DBE1CB;
  --ink:          #0F1A09;
  --ink-soft:     #3F4B37;
  --ink-faint:    #5B6652;
  --rule:         #D7DCC9;
  --vermilion:    #6B6800;
  --vermilion-deep: #4E4B08;

  /* Constant in both palettes, unlike --vermilion. Use for anything that must
     stay lime everywhere — the 気 in the topbar matches assets/favicon.svg. */
  --on-lime:      #05190A;
  --lime:         #E1E000;

  /* A token, not a value at the component: as a token the dark palette can
     redefine it without a `body.palette-dark .topbar` override, which would
     out-specify the plain-class resets. The nav panel does not use it. */
  --glass: oklch(95.5% 0.018 82 / 0.78);

  --paper-rgb: 241 243 235;
  --hero-glow: var(--paper-deep);

  --font-display: "Oswald", "Barlow Condensed", sans-serif;
  --font-body:    "Barlow", "Barlow Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   "Barlow Condensed", "Barlow", "Barlow Fallback", sans-serif;
  --font-cjk:     "Shippori Mincho B1", "Noto Serif JP", serif;
  --font-brush:   "Yuji Boku", "Shippori Mincho B1", "Noto Serif JP", serif;

  /* Fixed px, never vw: viewport-derived text ignores browser zoom
     (WCAG 2.2 SC 1.4.4). Floor 14px, base 19px. */
  --fs-100: 14px;
  --fs-200: 15px;
  --fs-300: 17px;
  --fs-400: 19px;
  --fs-500: 22px;
  --fs-600: 26px;

  --fs-display-m:  clamp(30px, 3.4vw, 40px);
  --fs-display-l:  clamp(32px, 4.4vw, 52px);
  --fs-display-xl: clamp(38px, 6vw, 72px);

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 32px);

  /* Hero height and section scroll-margin are both derived from this. */
  --topbar-h: 65px;
}

body.palette-dark{
  --paper: #0F1A09;
  --paper-deep: #212D1B;
  --ink: #F1F3EB;
  --ink-soft: #DBE1CB;
  --ink-faint: #8D9484;
  --rule: #343E2E;
  --vermilion: #E1E000;
  --vermilion-deep: #ACAB00;
  --paper-rgb: 15 26 9;
  --glass: rgba(15, 26, 9, .82);
  --hero-glow: #17220F;
}