/* Mok Cove design tokens, --mc- prefix (design pack 2026-10-20, tokens.css / tokens.json), beside the site's own
   tokens.css. Every LIVE value is mapped onto the token the site already holds (site/tokens.css, written from the app by
   scripts/site-sync.py), so a value lives in one place and this file names no color of its own.
   Left out on purpose: the pack's ASSET colors that exist only inside art (the wordmark's proofing grounds and letter
   gradients, the icon navy, glow and teal, the Mokie body and Puff gels; the art carries them), and the PROPOSED
   seasonal accents (GAPS D10, Json's call: pills stay neutral until then). Fonts are declared once, in site.css. */
:root {
  /* color */
  --mc-night: var(--dd-field);
  --mc-night-deep: var(--dd-sky-top);
  --mc-night-steel: var(--night-steel);
  --mc-paper: var(--paper);
  --mc-paper-hi: var(--paper-hi);
  --mc-card: var(--card);
  --mc-ink: var(--ink);
  --mc-muted: var(--muted);
  --mc-line: var(--line);
  --mc-on-night: var(--dd-deck-hi);
  --mc-on-night-soft: color-mix(in oklab, var(--dd-deck-hi) 78%, var(--dd-field));
  --mc-link-night: var(--dd-kelp-glow);
  --mc-action-top: var(--frost-hi);
  --mc-action-bottom: var(--dd-deck);
  --mc-lantern: var(--lantern);
  --mc-lantern-deep: var(--lantern-deep);
  --mc-focus: var(--lantern);
  --mc-sunset-peach: var(--ember-hot);
  --mc-sunset-coral: var(--ember-glow);
  --mc-foil-warm: var(--foil-warm);
  --mc-face-eye: var(--goo-eye);
  --mc-face-blush: var(--goo-blush);
  --mc-face-catchlight: var(--glare);
  --mc-ocean-deep: var(--ocean-deep);
  --mc-ocean-mid: var(--ocean-mid);
  --mc-ocean-light: var(--ocean-light);
  --mc-ocean-foam: var(--ocean-foam);
  --mc-gel-1: var(--kid-gel-1);
  --mc-gel-2: var(--kid-gel-2);
  --mc-gel-3: var(--kid-gel-3);
  --mc-gel-4: var(--kid-gel-4);
  --mc-gel-5: var(--kid-gel-5);
  --mc-gel-6: var(--kid-gel-6);
  /* type */
  --mc-font: var(--font);
  --mc-type-display: 900 clamp(2.4rem, 1.5rem + 4vw, 4.2rem)/1 var(--mc-font); --mc-track-display: -.02em;
  --mc-type-h2: 900 clamp(2rem, 1.4rem + 3vw, 3.2rem)/1.05 var(--mc-font); --mc-track-h2: -.02em;
  --mc-type-h3: 900 clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem)/1.05 var(--mc-font); --mc-track-h3: -.01em;
  --mc-type-price: 900 clamp(2.2rem, 1.6rem + 2.6vw, 3.2rem)/1 var(--mc-font); --mc-track-price: -.02em;
  --mc-type-lede: 800 clamp(1.15rem, 1rem + .8vw, 1.45rem)/1.3 var(--mc-font); --mc-track-lede: 0;
  --mc-type-card-title: 900 1.3rem/1.15 var(--mc-font); --mc-track-card-title: 0;
  --mc-type-body: 700 1.125rem/1.45 var(--mc-font); --mc-track-body: 0;
  --mc-type-button: 900 1.05rem/1 var(--mc-font); --mc-track-button: .04em;
  --mc-type-small: 700 1rem/1.4 var(--mc-font); --mc-track-small: 0;
  --mc-type-eyebrow: 900 .875rem/1.2 var(--mc-font); --mc-track-eyebrow: .08em;
  --mc-type-legal: 700 .9rem/1.4 var(--mc-font); --mc-track-legal: 0;
  /* space */
  --mc-s1: var(--s1);
  --mc-s2: var(--s2);
  --mc-s3: var(--s3);
  --mc-s4: var(--s4);
  --mc-s5: var(--s5);
  --mc-s6: 6rem;
  --mc-s7: 8rem;
  --mc-gutter: max(var(--s2), env(safe-area-inset-left), env(safe-area-inset-right));
  --mc-measure: 72rem;
  --mc-tap: var(--tap);
  --mc-tap-kid: var(--tap-kid);
  --mc-nav-h: var(--home-size);
  /* radius */
  --mc-r-pill: var(--round);
  --mc-r-card: var(--r-card);
  --mc-r-card-app: var(--card-r);
  --mc-r-key: var(--r-key);
  --mc-r-icon: var(--r-icon);
  /* shadow and glow */
  --mc-shade: color-mix(in srgb, var(--dd-shade) 55%, transparent);
  --mc-shadow-card: 0 1.5rem 2.5rem -.5rem var(--mc-shade);
  --mc-shadow-cover: 0 1rem 1.5rem -.5rem var(--mc-shade);
  --mc-glow-lantern-low: var(--lantern-low);
  --mc-glow-lantern: var(--lantern-glow);
  /* motion: the still values first; the moving ones under no-preference below (build still, add motion) */
  --mc-t-quick: var(--t-quick);
  --mc-t-ground: 850ms;
  --mc-t-slow: var(--slow);
  --mc-t-lantern-in: var(--lantern-in);
  --mc-t-lantern-breath: var(--lantern-breath);
  --mc-t-150: 0ms;
  --mc-t-250: 0ms;
  --mc-t-500: 0ms;
  --mc-ease: var(--ease);
  --mc-ease-out: var(--ease-out);
  --mc-ease-spring: var(--ease-spring);
  --mc-ease-marketing: cubic-bezier(.22, 1, .36, 1);
  --mc-reveal-distance: 0px;
  --mc-stagger: 0ms;
  /* gradients */
  --mc-grad-action-face: linear-gradient(to bottom, var(--mc-action-top), var(--mc-action-bottom));
}
@media (prefers-reduced-motion: no-preference) {
  :root { --mc-t-150: 150ms; --mc-t-250: 250ms; --mc-t-500: 500ms; --mc-reveal-distance: 16px; --mc-stagger: 80ms; }
}

/* Grounds: Night for the nav, hero and closer; Paper for long reading. Any element can wear one. */
[data-ground="night"] { --mc-bg: var(--mc-night); --mc-fg: var(--mc-on-night); --mc-fg-soft: var(--mc-on-night-soft); --mc-tile: color-mix(in srgb, var(--mc-action-bottom) 10%, transparent); --mc-link: var(--mc-link-night); color-scheme: dark; }
[data-ground="paper"] { --mc-bg: var(--mc-paper); --mc-fg: var(--mc-ink); --mc-fg-soft: var(--mc-muted); --mc-tile: var(--mc-card); --mc-link: color-mix(in oklab, var(--mc-gel-4), var(--mc-ink) 40%); color-scheme: light; }