/* ===============================================================
   EVM.family — design tokens
   One source of truth for colour, elevation, radius, motion and type.
   Names follow the template (--bg, --ink, --line, --surface, --accent-*)
   so the site reads like a sibling of the "Project bento" screen.

   Light (default): ochre cards on an olive-khaki ground. The site ships
   this one colourway; the other eleven are archived, ready to paste
   back, in design/palettes/colourways.css (see its README).
   Dark: the template's dark surfaces with the active accent ramp; the
   single "inversion" card flips to light so it stays the only one.
   =============================================================== */

:root {
  /* ---- accent: ochre ---- */
  --accent-50: #fdf6e8;
  --accent-100: #f9e8c4;
  --accent-200: #f0cf92;
  --accent-300: #e0ae5a;
  --accent-400: #cf9636;
  --accent-500: #b87f1f;
  --accent-600: #8f6114;
  --accent-700: #66440c;
  --accent-contrast: #1f1608;
  --accent-contrast-2: rgba(31, 22, 8, 0.8); /* secondary text on the accent card: keep ≥7:1 even at 12px */
  --accent-line: rgba(31, 22, 8, 0.16);
  --accent-rgb: 184, 127, 31; /* --accent-500 as "r, g, b": focus ring + accent shadow derive from it */
  --sh-accent: 0 10px 26px rgba(var(--accent-rgb), 0.3);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
  --lime-card: linear-gradient(140deg, #e0ae5a 0%, #f0cf92 62%, #f5dcaa 100%);
  --lime-tile: linear-gradient(120deg, #e0ae5a 0%, #f0cf92 52%, #f9e8c4 100%);
  --wave: #e0ae5a;

  /* ---- neutrals, warm-tinted ---- */
  --n-0: #ffffff;
  --n-50: #f7f6f4;
  --n-100: #f1efec;
  --n-200: #e5e2dd;
  --n-300: #d2cdc6;
  --n-400: #a8a29a;
  --n-500: #7a746c;
  --n-600: #57524b;
  --n-700: #3b3731;
  --n-800: #262320;
  --n-900: #17150f;

  /* ---- semantic ---- */
  --ok-bg: #e7f6ec;
  --ok-fg: #1c7a42;
  --warn-bg: #fdf0da;
  --warn-fg: #9a6708;
  --bad-bg: #fdeaea;
  --bad-fg: #b4322d;
  --info-bg: #e8effd;
  --info-fg: #2a56c6;

  /* ---- surfaces (light: olive-khaki ground) ---- */
  --bg: #b0ab82;
  --surface: #ffffff;
  --surface-2: #f8f6ef;
  --surface-3: #e9e6d8;
  --paper: #f4f2e8;
  --line: #e4e1d1;
  --line-soft: #eeece0;
  --ink: #1a1910;
  --ink-2: #5b594a;
  --ink-2-ground: #353220;   /* secondary text sitting directly on the khaki ground (≥5:1) */
  --ink-3: #656352;          /* readable tertiary text (≥4.5:1 on white/paper) */
  --mark: #8f8c77;           /* non-text marks only: hover borders, decorative icons */
  --deep: #16150e;
  --deep-ink: #ffffff;
  --sage: #8c8862;
  --dot: #cfccbb;
  --invert-bg: #16150e;
  --invert-ink: #f4f2e8;
  --invert-ink-2: #a9a695;
  --invert-line: rgba(255, 255, 255, 0.18);
  --invert-soft: rgba(255, 255, 255, 0.1);
  --olive: linear-gradient(150deg, #585640, #3b3a2a); /* deep enough that white body text clears 4.5:1 at the light stop */
  --olive-ink: #f6f4ec;
  --olive-ink-2: rgba(246, 244, 236, 0.9);
  --olive-soft: rgba(255, 255, 255, 0.22);

  /* avatar stack colours (template) */
  --av-0: #c96a44;
  --av-1: #4d6b8a;
  --av-2: #7a5ea8;
  --av-3: #3f8a6a;

  /* chain disc fallback colours (shown under the logo while it loads) */
  --c-eth: #627eea;
  --c-base: #0052ff;
  --c-rh: #00c805;
  --c-bnb: #f0b90b;

  /* the soft 3D sphere */
  --sphere: radial-gradient(circle at 36% 30%, #fdf1e4 0%, #efd3b8 30%, #d3a682 60%, #a9714f 88%, #86573c 100%);

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px rgba(23, 21, 15, 0.05);
  --sh-2: 0 2px 4px rgba(23, 21, 15, 0.04), 0 6px 14px rgba(23, 21, 15, 0.05);
  --sh-3: 0 4px 10px rgba(23, 21, 15, 0.05), 0 16px 34px rgba(23, 21, 15, 0.07);
  --sh-4: 0 8px 20px rgba(23, 21, 15, 0.07), 0 30px 60px rgba(23, 21, 15, 0.1);
  --sh-hover: 0 18px 40px rgba(20, 23, 15, 0.14);

  /* ---- radius ---- */
  --r-sm: 10px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-card: 34px;
  --r-full: 999px;

  /* ---- motion ---- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;
  --t-draw: 900ms;

  /* ---- type ---- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  color-scheme: light;
}

/* ===============================================================
   Alternative colourways live in design/palettes/colourways.css.
   To switch one on, paste its block (and its dark-mode line) here,
   add it to COLORWAYS in app.js, and the palette menu comes back.
   =============================================================== */

/* ---- surfaces (dark) ---- */
:root[data-theme="dark"] {
  --bg: #0e0d0b;
  --surface: #191714;
  --surface-2: #211e1a;
  --surface-3: #2c2823;
  --paper: #211e1a;
  --line: #2e2a25;
  --line-soft: #241f1b;
  --ink: #f6f4f1;
  --ink-2: #a8a29a;
  --ink-2-ground: #a8a29a;
  --ink-3: #8f8880;
  --mark: #6f6960;
  --deep: #f6f4f1;
  --deep-ink: #17150f;
  --sage: #57524b;
  --dot: #3b3731;
  --invert-bg: #f6f4f1;
  --invert-ink: #17150f;
  --invert-ink-2: #5f6657;
  --invert-line: rgba(23, 21, 15, 0.16);
  --invert-soft: rgba(23, 21, 15, 0.08);
  --olive: linear-gradient(150deg, #44422f, #2b2a1e);
  --olive-ink: #e9eee2;
  --olive-ink-2: rgba(233, 238, 226, 0.85);
  --olive-soft: rgba(255, 255, 255, 0.16);
  --wave: var(--accent-500);

  --ok-bg: #12301f;
  --ok-fg: #5ed48c;
  --warn-bg: #33270e;
  --warn-fg: #e9b75c;
  --bad-bg: #351917;
  --bad-fg: #ef857f;
  --info-bg: #14203f;
  --info-fg: #7ea2f5;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.45);
  --sh-3: 0 4px 10px rgba(0, 0, 0, 0.45), 0 16px 34px rgba(0, 0, 0, 0.5);
  --sh-4: 0 8px 20px rgba(0, 0, 0, 0.5), 0 30px 60px rgba(0, 0, 0, 0.6);
  --sh-hover: 0 18px 40px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.3);

  color-scheme: dark;
}


/* Motion is decoration. If the reader has asked for less of it, the
   components still arrive — they just arrive already finished. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
    --t-draw: 1ms;
  }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}