/* ChimpVibe design-system tokens, brought into the site from ChimpVibe/design-system/tokens.css (the Design tab).
   Sources: Design Sheet III and the homepage redesign ("ChimpVibe Homepage Concepts"); the redesign wins every
   disagreement. Specimen Wall (the front page) is the default set below.
   SCOPED: every token lives on .cv-ds, so only a page (or a part of one) that opts in with class="cv-ds" sees them, and
   the older pages built on /shared/tokens.css keep their look. Purpose names only: the sheet's short aliases (--ink,
   --mint, --dim ...) are left out on purpose, because /shared/tokens.css already uses those names with older values.
   Used by the front page and the game tree page (/<slug>/tree). The Hi-Score view, the orchard widget and the parked Arcade Floor themes stay in the Design tab until those pages are
   built. */

@font-face { font-family: "Russo One"; font-weight: 400; font-display: swap; src: url(/shared/fonts/russo-one.woff2) format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap; src: url(/shared/fonts/rubik.woff2) format("woff2"); }

.cv-ds {
  color-scheme: dark;

  /* colour: raw brand palette */
  --cv-ground: #0a0d12;
  --cv-tone-1: #10161d;
  --cv-tone-2: #172029;
  --cv-tone-3: #1f2a36;
  --cv-ink: #e8ecf1;
  --cv-dim: #93a0ad;
  --cv-mint: #78d8aa;
  --cv-mint-bright: #c8fce3;
  --cv-mint-deep: #2f8a62;
  --cv-coin: #ffc94d;
  --cv-coin-deep: #b9840f;
  --cv-neon: #7ab8ff;
  --cv-danger: #ff6b6b;

  /* colour: by purpose */
  --color-bg: var(--cv-ground);
  --color-surface-sunken: var(--cv-tone-1);
  --color-surface: var(--cv-tone-2);
  --color-surface-raised: var(--cv-tone-3);
  --color-text: var(--cv-ink);
  --color-text-muted: var(--cv-dim);
  --color-primary: var(--cv-mint);
  --color-primary-strong: var(--cv-mint-bright);
  --color-primary-edge: var(--cv-mint-deep);
  --color-on-primary: var(--cv-ground);
  --color-take: var(--cv-coin);              /* coin: only what you can take away (tag, new fruit, the big stat) */
  --color-take-edge: var(--cv-coin-deep);
  --color-on-take: var(--cv-ground);
  --color-accent: var(--cv-neon);
  --color-danger: var(--cv-danger);
  --color-focus: var(--cv-mint-bright);
  --color-disabled-bg: var(--cv-tone-3);
  --color-disabled-text: var(--cv-dim);
  --color-link: var(--cv-mint-bright);
  --color-link-underline: var(--cv-mint-deep);
  --color-live: var(--cv-mint);
  --color-live-halo: rgba(120, 216, 170, .18);
  --color-idle: var(--cv-tone-3);
  --color-primary-tint: rgba(120, 216, 170, .14);
  --color-take-tint: rgba(255, 201, 77, .13);
  --color-take-tint-hover: rgba(255, 201, 77, .22);
  --color-accent-tint: rgba(122, 184, 255, .15);
  /* someone is building on this fruit (the tree page). The orange the tree already paints a busy fruit in (shared/card.css
     --in-progress, which stays the operator app's value); a role of its own, never a tree colour. */
  --color-in-progress: #ff9f43;

  /* material: flat (the redesign) */
  --material-raised: var(--color-surface);
  --material-raised-hover: var(--color-surface-raised);
  --material-low: var(--color-surface-sunken);
  --material-low-hover: var(--color-surface);
  --material-primary: var(--color-primary);
  --material-take: var(--color-take);
  --material-disabled: var(--color-disabled-bg);
  --material-tag: var(--color-take-tint);
  --material-tag-hover: var(--color-take-tint-hover);

  /* typography */
  --font-display: "Russo One", "Arial Black", Impact, sans-serif;
  --font-body: "Rubik", "Segoe UI", system-ui, sans-serif;
  --text-body: clamp(15px, 1.05vw, 17px);
  --text-lead: clamp(19px, 1.6vw, 23px);
  --text-heading: clamp(26px, 2.6vw, 36px);  /* "Community Games" 36 at 1920 (Specimen Wall) */
  --text-hero: clamp(34px, 4.4vw, 60px);
  --text-stat: clamp(64px, 7.8vw, 150px);    /* the big coin number (Specimen Wall) */
  --text-card-title: 21px;
  --text-control: 19px;
  --text-control-quiet: 18px;
  --text-meta: 16px;
  --text-small: 15px;
  --text-xs: 14px;
  --text-eyebrow: 13px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1;
  --leading-hero: 1.04;
  --leading-heading: 1.05;
  --leading-snug: 1.3;
  --leading-lead: 1.4;
  --leading-body: 1.55;
  --tracking-display: .02em;
  --tracking-heading: .01em;
  --tracking-hero: .01em;
  --tracking-tag: .01em;
  --tracking-stat: -.02em;
  --tracking-eyebrow: .14em;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-gutter: clamp(16px, 4vw, 64px);
  --space-section: clamp(56px, 8vw, 112px);
  --content-max: 1240px;
  --ratio-capture: 16/10;
  /* Specimen Wall: 3 columns, each a capture with its tree standing beside it */
  --wall-columns: 3;
  --size-wall-capture: 220px;
  --size-wall-tree: 120px;

  /* radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --radius-tag: .5em;
  --radius-cap: 14px 14px 14px 4px;

  /* elevation: flat; the only depth is the solid floor under a cap */
  --size-floor: 5px;
  --elevation-capture: none;
  --elevation-cap-primary: 0 var(--size-floor) 0 var(--color-primary-edge);
  --elevation-cap-primary-hover: 0 calc(var(--size-floor) + 2px) 0 var(--color-primary-edge);
  --elevation-cap-take: 0 var(--size-floor) 0 var(--color-take-edge);
  --elevation-cap-take-hover: 0 calc(var(--size-floor) + 2px) 0 var(--color-take-edge);
  --elevation-cap-pressed: 0 0 0 var(--color-primary-edge);
  --elevation-cap-disabled: 0 var(--size-floor) 0 var(--color-surface);
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* motion */
  --duration-press: 120ms;
  --duration-quick: 140ms;
  --duration-fade: 150ms;
  --duration-hover: 240ms;
  --duration-sink: 240ms;
  --duration-glow: 1200ms;
  --ease-standard: ease;
  --lift-hover: -4px;
  --lift-press: var(--size-floor);
}

@media (prefers-reduced-motion: reduce) {
  .cv-ds { --lift-hover: 0px; --lift-press: 0px; }
}