/* Design tokens for the turtles viewer: colour, radius, spacing, type, shadow and motion, as CSS custom properties.
   Light is the default; the dark theme is a cosy dark (deep green/navy with warm accents). theme.js sets
   <html data-theme="light|dark"> from the saved choice or the system preference.
   The world/3D subset of these values is mirrored in tokens.js (a test keeps the two in step), so the keeper's console
   and a later mobile app can adopt the same look by loading this file and using the variables. */
:root {
  /* ---- colour: surfaces and text ---- */
  --c-bg: #fff6e6;
  --c-bg-2: #ffeccb;
  --c-surface: #ffffff;
  --c-surface-2: #fff4dc;
  --c-ink: #26372f;
  --c-ink-2: #51635a;
  --c-line: #ecdfc4;
  --c-shadow: 38, 55, 47;            /* rgb triplet for shadows */

  /* ---- colour: brand and cheerful accents (fills; text on them is --c-on-accent) ---- */
  --c-leaf: #3dbd7d;
  --c-leaf-ink: #17724a;             /* leaf green that is readable as text on --c-surface */
  --c-sun: #ffc83d;
  --c-coral: #ff7a66;
  --c-sky: #4db3f2;
  --c-sky-ink: #1b6aa3;
  --c-mint: #7ee0c3;
  --c-rose: #ff9bb0;
  --c-on-accent: #1e2d26;
  --c-warn-bg: #fff0c2;
  --c-warn-ink: #7a4b00;
  --c-bad: #c4402f;
  --c-focus: #1b6aa3;
  --c-sun-ink: #c77a00;              /* the sun as a line on a light surface */
  --c-halo: #ffffff;                 /* the white halo round a selected place on the map */
  --c-wash-sun: rgba(255, 200, 61, .22);   /* the two soft washes behind the page */
  --c-wash-sky: rgba(77, 179, 242, .16);

  /* ---- the world (mirrored in tokens.js) ---- */
  --w-moss: #7d9a3c;
  --w-clover: #2fc4a8;
  --w-grass: #66c26a;
  --w-water-shallow: #7fe0d4;
  --w-water-deep: #1b86a8;
  --w-sand: #f0d9a0;
  --w-sun: #fff1c9;
  --w-moon: #cfe0ff;
  --w-warm-glow: #ffc861;
  --w-night-sky: #1d3566;

  /* ---- the map and overlays ---- */
  --map-frame: #d6efc9;
  --map-label: #fffdf6;
  --map-label-stroke: rgba(30, 70, 48, .9);
  --map-pond: #7fe0d4;

  /* ---- need and activity colours (an icon and a word always go with them) ---- */
  --n-hunger: #ff7a66; --n-warmth: #ffb02e; --n-rest: #4db3f2; --n-social: #ff7fa3; --n-curiosity: #3dbd7d;
  --k-sleep: #4db3f2; --k-walk: #3dbd7d; --k-bask: #ffb02e; --k-swim: #2fa8e0; --k-eat: #ff7a66; --k-explore: #2fc4a8;
  --k-arrange: #d98a3d; --k-speak: #ff7fa3; --k-company: #ff7fa3; --k-read: #8aa04a; --k-rest: #6f9bd6; --k-carry: #d98a3d;
  --k-pick: #d98a3d; --k-idle: #7da38f; --k-fail: #e0866f;

  /* ---- status zones: how a bar is doing (a shape and a pattern always go with the colour; status.css) ---- */
  --z-good: #2a9363; --z-good-ink: #17724a;
  --z-watch: #b97a00; --z-watch-ink: #7a4b00;
  --z-trouble: #d4442c; --z-trouble-ink: #a8301c;
  --z-track: #f3ead6;

  /* ---- radii ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* ---- spacing (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;

  /* ---- type: system fonts only, chunky and friendly ---- */
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px;
  --w-normal: 500; --w-bold: 700; --w-heavy: 800;

  /* ---- shadow and motion ---- */
  --sh-1: 0 1px 0 rgba(var(--c-shadow), .06), 0 2px 8px rgba(var(--c-shadow), .08);
  --sh-2: 0 2px 0 rgba(var(--c-shadow), .06), 0 10px 28px rgba(var(--c-shadow), .14);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: .22s;
}

:root[data-theme="dark"] {
  --c-bg: #14242a;
  --c-bg-2: #1a2f35;
  --c-surface: #1f353c;
  --c-surface-2: #284249;
  --c-ink: #f6ecdb;
  --c-ink-2: #bdccc6;
  --c-line: #38565f;
  --c-shadow: 3, 10, 14;
  --c-leaf: #5fd39a;
  --c-leaf-ink: #7fe0ae;
  --c-sun: #ffcf5c;
  --c-coral: #ff9078;
  --c-sky: #6cc3f7;
  --c-sky-ink: #8fd2fb;
  --c-mint: #7ee0c3;
  --c-rose: #ffa7bb;
  --c-on-accent: #10211b;
  --c-warn-bg: #4a3a12;
  --c-warn-ink: #ffdf8a;
  --c-bad: #ff9a88;
  --c-focus: #ffcf5c;
  --c-sun-ink: #ffcf5c;
  --c-wash-sun: rgba(255, 200, 61, .10);
  --c-wash-sky: rgba(108, 195, 247, .10);
  --map-frame: #1b3a38;
  --map-label: #fffdf6;
  --map-label-stroke: rgba(8, 22, 24, .92);
  --n-hunger: #ff9078; --n-warmth: #ffc050; --n-rest: #6cc3f7; --n-social: #ff93b3; --n-curiosity: #5fd39a;
  --k-sleep: #6cc3f7; --k-walk: #5fd39a; --k-bask: #ffc050; --k-swim: #52b9ee; --k-eat: #ff9078; --k-explore: #52d6bb;
  --k-arrange: #e9a35b; --k-speak: #ff93b3; --k-company: #ff93b3; --k-read: #a9c25f; --k-rest: #8fb2e6; --k-carry: #e9a35b;
  --k-pick: #e9a35b; --k-idle: #8fbfa7; --k-fail: #f0a08a;
  --z-good: #5fd39a; --z-good-ink: #7fe0ae;
  --z-watch: #ffcf5c; --z-watch-ink: #ffdf8a;
  --z-trouble: #ff8f7a; --z-trouble-ink: #ffab9b;
  --z-track: #16282e;
}