/* ChimpVibe design tokens.
   Sources: ChimpVibe Design Sheet III (https://design.chimpvibe.dev/?version=3), read 2026-10-21, and the proposed
   homepage redesign ("ChimpVibe Homepage Concepts", four concepts built on Design Sheet II), read 2026-10-21.
   Concept roles (decided by the user 2026-10-21): Specimen Wall = the front page and the DEFAULT (:root below);
   Hi-Score Table = the separate ranking view ([data-view="hi-score"]); Night Orchard = the profile "my games" widget
   ([data-widget="orchard"]); Arcade Floor = PARKED, for future use ([data-concept="arcade-floor"], kept intact).
   THE REDESIGN WINS every disagreement. Lines changed by it are marked "redesign" (old sheet value in brackets).
   Purpose names first; the sheet's own names follow as aliases (marked "alias").
   "gap-fill" marks values neither source defines, added for a consistent scale or a missing state. */

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

:root{
  color-scheme:dark;

  /* ---------- colour: raw brand palette (sheet and redesign agree on every value) ---------- */
  --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);                 /* page ground; everything sits on it */
  --color-surface-sunken:var(--cv-tone-1);     /* rows, cards, empty slots, chips, wells */
  --color-surface:var(--cv-tone-2);            /* secondary buttons, tree tiles, hover/selected of a sunken surface */
  --color-surface-raised:var(--cv-tone-3);     /* idle dots, tooltips, hover of a surface */
  --color-text:var(--cv-ink);
  --color-text-muted:var(--cv-dim);
  --color-primary:var(--cv-mint);              /* the tree: main action, live, growth */
  --color-primary-strong:var(--cv-mint-bright);/* links and quiet-button labels on dark, highlights */
  --color-primary-edge:var(--cv-mint-deep);    /* the floor under mint caps, link underlines */
  --color-on-primary:var(--cv-ground);         /* redesign [#06281a]: text on mint is the ground colour */
  --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);            /* redesign [#2a1c00]: same rule as on mint */
  --color-accent:var(--cv-neon);               /* cool second voice, used rarely (Hi-Score eyebrow) */
  --color-on-accent:#07203d;
  --color-danger:var(--cv-danger);             /* only hiding and removing */
  --color-on-danger:#3d0808;
  --color-focus:var(--cv-mint-bright);         /* redesign [coin]: 3px mint-bright ring */
  --color-disabled-bg:var(--cv-tone-3);
  --color-disabled-text:var(--cv-dim);
  --color-link:var(--cv-mint-bright);          /* redesign: "Open the tree" */
  --color-link-underline:var(--cv-mint-deep);  /* redesign: 2px bar under links */
  --color-live:var(--cv-mint);                 /* redesign: live dot */
  --color-live-halo:rgba(120,216,170,.18);     /* redesign: halo around the live dot */
  --color-idle:var(--cv-tone-3);               /* redesign: dot of a game nobody is playing */
  --color-in-progress:#ff9f43;                 /* game tree page: someone is building on this fruit. Was a hard-coded
                                                  orange (the tree's busy-fruit colour); now a signal role, never a tree colour */
  /* tints (flat chip and tag backgrounds) */
  --color-primary-tint:rgba(120,216,170,.14);
  --color-take-tint:rgba(255,201,77,.13);      /* redesign agrees: tag fill */
  --color-take-tint-hover:rgba(255,201,77,.22);
  --color-accent-tint:rgba(122,184,255,.15);
  --color-danger-tint:rgba(255,107,107,.13);
  --color-danger-tint-hover:rgba(255,107,107,.22);

  /* ---------- material: redesign is FLAT (sheet II). [sheet v3: lit gradients] ---------- */
  --material-raised:var(--color-surface);            /* redesign [gradient #25323f..#151e27] */
  --material-raised-hover:var(--color-surface-raised);
  --material-low:var(--color-surface-sunken);        /* redesign [gradient] */
  --material-low-hover:var(--color-surface);
  --material-well:var(--color-surface-sunken);       /* redesign [gradient] */
  --material-track:var(--color-bg);                  /* redesign [gradient] */
  --material-primary:var(--color-primary);           /* redesign [mint gradient] */
  --material-primary-rim:var(--color-primary-edge);  /* redesign [#286d50]: floor is mint-deep */
  --material-take:var(--color-take);                 /* redesign [coin gradient] */
  --material-take-rim:var(--color-take-edge);        /* redesign [#916515] */
  --material-disabled:var(--color-disabled-bg);
  --material-chip-primary:var(--color-primary-tint);
  --material-chip-take:var(--color-take-tint);
  --material-chip-accent:var(--color-accent-tint);
  --material-tag:var(--color-take-tint);             /* redesign [brown gradient]: flat coin tint */
  --material-tag-hover:var(--color-take-tint-hover);
  --material-danger:var(--color-danger-tint);
  --material-danger-hover:var(--color-danger-tint-hover);

  /* ---------- typography ---------- */
  --font-display:"Russo One","Arial Black",Impact,sans-serif; /* names, headings and every numeral (plain zero) */
  --font-body:"Rubik","Segoe UI",system-ui,sans-serif;        /* reading and labels (plain zero) */
  --text-body:clamp(15px,1.05vw,17px);   /* step-0 */
  --text-lead:clamp(19px,1.6vw,23px);    /* step-1: lead paragraph, h3 */
  --text-heading:clamp(26px,2.6vw,36px); /* step-2: section title ("Community Games" 36 at 1920; Specimen Wall, default) */
  --text-hero:clamp(34px,4.4vw,60px);    /* step-3: page h1. redesign [clamp(40px,5.4vw,78px)] */
  --text-stat:clamp(64px,7.8vw,150px);   /* redesign: the big coin number ("16 games"); Specimen Wall size */
  --text-card-title:21px;                /* game name under a capture (Specimen Wall, default) */
  --text-control:19px;                   /* primary button label (display) */
  --text-control-quiet:18px;             /* redesign: secondary button label (body 500) */
  --text-meta:16px;                      /* redesign: author under a game name */
  --text-small:15px;                     /* links, captions, chips, labels */
  --text-xs:14px;                        /* swatch labels, meta */
  --text-eyebrow:13px;                   /* redesign: uppercase kicker */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;                 /* redesign: eyebrows */
  --weight-bold:700;
  --leading-tight:1;
  --leading-hero:1.04;                   /* redesign */
  --leading-heading:1.05;
  --leading-snug:1.3;
  --leading-lead:1.4;                    /* redesign */
  --leading-body:1.55;                   /* redesign [1.6] */
  --tracking-display:.02em;              /* button labels (sheet and redesign agree) */
  --tracking-heading:.01em;              /* redesign: h1-h3 */
  --tracking-hero:.01em;                 /* redesign [-.01em] */
  --tracking-tag:.01em;                  /* redesign */
  --tracking-stat:-.02em;                /* redesign: big number */
  --tracking-eyebrow:.14em;              /* redesign */

  /* ---------- spacing (gap-fill scale; redesign gaps fit it) ---------- */
  --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);   /* page inset (redesign: 64 at 1920, agrees) */
  --space-section:clamp(56px,8vw,112px);
  --content-max:1240px;
  --ratio-capture:16/10;                 /* redesign: 220x138, 240x150 */
  /* Specimen Wall (default front page): 3 columns, each a capture with its tree standing beside it (pitch 393 x 216) */
  --wall-columns:3;                      /* Specimen Wall */
  --size-wall-capture:220px;             /* Specimen Wall: capture 220x138 */
  --size-wall-tree:120px;                /* Specimen Wall: tree column beside the capture */

  /* ---------- radius ---------- */
  --radius-xs:6px;
  --radius-sm:10px;    /* small quiet button */
  --radius-md:12px;    /* quiet (secondary) button, note box */
  --radius-card:14px;  /* redesign: picker card */
  --radius-lg:16px;    /* game capture, table row, tree tile (redesign agrees) */
  --radius-xl:20px;
  --radius-2xl:22px;   /* dialog */
  --radius-pill:999px; /* chip, slot chip, dot */
  --radius-tag:.5em;   /* redesign [10px]: scales with the tag text (8/9/10 at 16/18/20px) */
  --radius-cap:14px 14px 14px 4px; /* primary button: asymmetric cap (sheet and redesign agree) */

  /* ---------- elevation: redesign is flat; depth comes only from the solid floor under caps ---------- */
  --size-floor:5px;                      /* redesign: mint-deep floor under the primary cap */
  --edge-light:0 0 #0000;                /* redesign [inset 0 1px 0 #ffffff1f] */
  --edge-dark:0 0 #0000;                 /* redesign [inset 0 -2px 0 #00000059] */
  --shadow-contact:0 0 #0000;            /* redesign [0 2px 3px #00000066] */
  --shadow-soft:0 0 #0000;               /* redesign [0 10px 22px -8px #00000099] */
  --elevation-raised:none;               /* redesign [lit edges + contact + soft shadow] */
  --elevation-recessed:none;             /* redesign [inset well] */
  --elevation-float:none;                /* redesign [float shadow] */
  --elevation-dialog:inset 0 1px 0 #ffffff29,inset 0 -2px 0 #0006,0 3px 6px #0007,0 24px 50px -12px #000b; /* sheet: no dialog in the redesign */
  --elevation-capture:none;              /* redesign [capture shadow] */
  --elevation-capture-hover:none;        /* redesign */
  --elevation-cap-primary:0 var(--size-floor) 0 var(--color-primary-edge);                       /* redesign */
  --elevation-cap-primary-hover:0 calc(var(--size-floor) + 2px) 0 var(--color-primary-edge);     /* gap-fill */
  --elevation-cap-take:0 var(--size-floor) 0 var(--color-take-edge);                             /* redesign rule applied to coin */
  --elevation-cap-take-hover:0 calc(var(--size-floor) + 2px) 0 var(--color-take-edge);           /* gap-fill */
  --elevation-cap-pressed:0 0 0 var(--color-primary-edge);                                       /* redesign: floor gone */
  --elevation-cap-disabled:0 var(--size-floor) 0 var(--color-surface);                           /* gap-fill */
  --elevation-chip:none;                 /* redesign */
  --elevation-selected:inset 0 -4px 0 var(--color-primary); /* redesign: selected card bar */
  --focus-ring:3px solid var(--color-focus);
  --focus-offset:3px;

  /* ---------- motion ---------- */
  --duration-press:120ms;
  --duration-quick:140ms;
  --duration-fade:150ms;
  --duration-hover:240ms;   /* redesign [200ms]: .24s ease lift */
  --duration-sink:240ms;
  --duration-pop:360ms;
  --duration-lift:500ms;
  --duration-glow:1200ms;
  --duration-sweep:1600ms;
  --duration-marquee:4000ms;
  --ease-standard:ease;     /* redesign */
  --ease-out:ease-out;
  --ease-pop:cubic-bezier(.3,1.6,.5,1);
  --ease-grow:cubic-bezier(.3,.7,.2,1);
  --lift-hover:-4px;        /* card/capture rises on hover (agree; redesign drops the -.6deg tilt) */
  --lift-press:var(--size-floor); /* redesign [2px]: the cap sinks onto its floor */

  /* ---------- aliases: the design sheet's own names ---------- */
  --ground:var(--cv-ground);         /* alias */
  --tone-1:var(--cv-tone-1);         /* alias */
  --tone-2:var(--cv-tone-2);         /* alias */
  --tone-3:var(--cv-tone-3);         /* alias */
  --ink:var(--cv-ink);               /* alias */
  --dim:var(--cv-dim);               /* alias */
  --mint:var(--cv-mint);             /* alias */
  --mint-bright:var(--cv-mint-bright); /* alias */
  --mint-deep:var(--cv-mint-deep);   /* alias */
  --coin:var(--cv-coin);             /* alias */
  --coin-deep:var(--cv-coin-deep);   /* alias */
  --neon:var(--cv-neon);             /* alias */
  --danger:var(--cv-danger);         /* alias */
  --f-show:var(--font-display);      /* alias */
  --f-text:var(--font-body);         /* alias */
  --step-0:var(--text-body);         /* alias */
  --step-1:var(--text-lead);         /* alias */
  --step-2:var(--text-heading);      /* alias */
  --step-3:var(--text-hero);         /* alias */
  --surface-raised:var(--material-raised); /* alias */
  --surface-low:var(--material-low); /* alias */
  --depth-raised:var(--elevation-raised);  /* alias */
  --depth-recessed:var(--elevation-recessed); /* alias */
}

/* ---------- concept roles ----------
   :root above IS Specimen Wall (the front page): section title 36, coin stat 150, card title 21, 3-column wall.
   The other concepts are scoped themes: put the attribute on the view or widget's wrapper, never on <html> of the front page. */

/* Specimen Wall: the default. This selector only resets a nested scope back to the front-page values. */
[data-concept="specimen-wall"]{--text-heading:clamp(26px,2.6vw,36px);--text-stat:clamp(64px,7.8vw,150px);--text-card-title:21px}

/* Hi-Score Table: the separate ranking view ("Top games"). */
[data-view="hi-score"],[data-concept="hi-score-table"]{
  --text-heading:clamp(30px,3.2vw,46px);      /* concept: title 46 */
  --text-stat:clamp(56px,5.8vw,112px);        /* concept: coin "100" 112 */
  --text-card-title:23px;                     /* concept: game name in a row */
  --text-rank:32px;                           /* concept: rank number, dim (#1 ink) */
  --text-row-count:34px;                      /* concept: metric value in a row, ink */
  --text-row-count-minor:24px;                /* concept: fruit count beside the tree tile */
  --text-chip:20px;                           /* concept: slot chips Russo 20 */
  --text-eyebrow-accent:18px;                 /* concept: "HI-SCORES" Russo 18 neon */
  --tracking-eyebrow-accent:.17em;            /* concept */
  --size-row:96px;                            /* concept: row height, tree tile 96 */
  --size-chip:44px;                           /* concept: slot chip height */
  --size-tab:44px;                            /* gap-fill: metric tab height = chip height */
}

/* Night Orchard: the profile widget "My games orchard" (a profile shows the games that account owns). */
[data-widget="orchard"],[data-concept="night-orchard"]{
  --text-heading:clamp(28px,2.9vw,40px);      /* concept: title 40 */
  --text-stat:clamp(26px,1.8vw,34px);         /* concept: coin "101" 34 inline */
  --text-card-title:22px;                     /* concept */
  --size-orchard-capture:240px;               /* concept: capture 240x150 */
  --size-orchard-tree:220px;                  /* concept: tree height above the ground line */
  --size-orchard-ground:28px;                 /* concept: tone-1 ground band the trees stand on */
  --color-orchard-ground:var(--color-surface-sunken); /* concept: ground band */
  --size-orchard-hill:20px;                   /* concept: rolling ground, crest height under a tree */
  --size-orchard-hill-low:12px;               /* concept: crests vary in height */
  --size-orchard-root:10px;                   /* concept: a trunk stands this far down in the ground band, in front of its hill */
  --size-scroll-btn:40px;                     /* gap-fill: round prev/next button that replaces the scrollbar */
}

/* Arcade Floor: PARKED, for future use. Not used by any view now; keep every value and its notes (NOTES.md). */
[data-concept="arcade-floor"]{
  --text-heading:clamp(26px,2.6vw,36px);      /* concept: title 36 */
  --text-stat:clamp(26px,1.8vw,34px);         /* concept: no big stat; the tag sits in the cabinet */
  --text-card-title:21px;
  --radius-cabinet:14px;                      /* concept: cabinets r12-14 */
  --color-cabinet:var(--color-surface);       /* concept: cabinets tone-2 */
  --color-cabinet-raised:var(--color-surface-raised); /* concept: tone-3 */
  --glow-marquee:0 0 9px rgba(120,216,170,.55); /* concept: marquee glow mint@55% blur 9 */
  --color-scanline:rgba(120,216,170,.18);     /* concept: scanline sweep mint@18% */
  /* concept also: round "Start" cap (pill, radial mint gradient, ground ring); marquee lights coin/mint (--duration-marquee) */
}

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