/* 1031 BO — shared design tokens. Derived from the KAWKLE patch:
   olive #3d481e, near-black #231f20, greys #58595b / #a7a9ac, red #ed1f27 (skull eye). */
:root {
  /* brand */
  --olive: #3d481e;
  --olive-900: #121410;   /* olive-tinted near-black (page bg for dark direction) */
  --olive-850: #1a1e15;   /* dark surface */
  --olive-800: #262d13;
  --olive-700: #2f3817;
  --olive-600: #3d481e;   /* = brand olive */
  --olive-500: #52612a;   /* smallest olive that passes 4.5:1 as text on paper (6.1:1) */
  --olive-400: #6f8139;   /* large-text / decorative only on light bg (3.9:1) */
  --olive-350: #9aa85a;   /* olive label text on dark bg (7.2:1) */
  --olive-200: #c9cfb6;   /* muted text on olive (6.1:1) */
  --olive-150: #dfe3cf;
  --olive-100: #e6e9dc;   /* soft light surface */
  --olive-50:  #f3f4ee;
  --ink: #231f20;
  --grey-600: #58595b;    /* muted text on paper (6.4:1) */
  --grey-400: #a7a9ac;    /* muted text on dark (7.9:1). NOT on olive (4.2:1). */
  --grey-200: #d9dadb;
  --grey-100: #ececed;
  --paper: #f4f4ef;
  --white: #f2f3ec;
  --red: #ed1f27;         /* accent. White-on-red = 4.35:1 → only as LARGE text (≥19px/700). Never red text on olive (2.3:1). */
  --red-700: #c4161d;     /* hover/pressed; white-on-red-700 = 6.0:1 */

  /* type scale (rem) */
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;   --fs-2xl: 2rem;    --fs-3xl: 2.75rem; --fs-4xl: 3.5rem; --fs-5xl: 4.5rem; --fs-6xl: 6rem;
  --track-display: -0.03em;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.6;

  /* spacing (8px scale) */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 3rem; --s-8: 4rem; --s-12: 6rem; --s-16: 8rem; --s-20: 10rem;
  --gutter: 1rem;            /* phones */
  --gutter-lg: 2rem;
  --measure: 65ch;

  /* radii, shadows, motion */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.12);
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms;
}

/* Role tokens — each direction overrides these in its own <style>. Defaults = light. */
:root {
  --bg: var(--paper);
  --surface: #ffffff;
  --fg: var(--ink);
  --muted: var(--grey-600);
  --border: rgba(35,31,32,.12);
  --accent: var(--red);
  --accent-hover: var(--red-700);
  --focus: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}