/* MiMi Pic — tokens.css
 * The ONLY per-brand file (site_build_protocol §1: "per-brand differences live
 * in a single tokens.css"). Values are copied from the mandated standard —
 * shared/workspace-apps/design/design-systems/mimipic/design-styles.html —
 * NOT invented here. Glass Liquid mechanics are fixed; only the hue changes
 * (mimipic-external-surfaces §site-and-platform-handoff).
 *
 * Caveat recorded honestly: sage #5B6F62 (the logo colour) and designer-white
 * #FBFAF7 are Ivan-locked. The remaining palette entries and the typefaces are
 * marked "pending Ivan look-approval" in design-styles.html. They are used here
 * because that file IS the standard, but they are not locked.
 */

:root {
  /* Palette */
  --mp-sage: #5b6f62;        /* brand base — the logo colour (locked) */
  --mp-sage-deep: #3f4e45;
  --mp-wood: #b07d4b;        /* warm wood accent — ties to the wooden puzzle itself */
  --mp-cream: #f4f1ea;
  --mp-white: #fbfaf7;       /* designer-white brand surface (Ivan-approved) */
  --mp-ink: #232323;
  --mp-muted: #6b7269;

  /* The page surface. Designer-white #FBFAF7 — NOT stark white — is Ivan's round-3
   * choice (2026-06-27, card 2ad9e0c3 option a); cream stays defined but is not the
   * surface. Sourced from the design system's store demo, not picked here. */
  --mp-surface: var(--mp-white);

  /* The sage bloom behind the page. Part of the Glass Liquid language: the floating
   * glass has to have something to refract, or it reads as a flat grey panel. */
  --mp-page-bloom: radial-gradient(1100px 560px at 78% -12%, rgba(91, 111, 98, 0.16), transparent 60%);

  /* Type */
  --mp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Glass Liquid — mechanics FIXED, hue tinted to sage. Do not retune. */
  --mp-glass-bg: rgba(91, 111, 98, 0.14);
  --mp-glass-blur: blur(10px) saturate(220%) brightness(1.1);
  --mp-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 3px 10px rgba(0, 0, 0, 0.03);
  --mp-glass-radius: 14px;

  /* Card surface — SOLID. never backdrop-filter (the one hard perf rule:
   * a grid of tens of thousands of products must scroll smoothly). */
  --mp-card-bg: rgba(255, 255, 255, 0.92);

  --mp-vignette: linear-gradient(
    to bottom,
    rgba(20, 34, 27, 0.45) 0%,
    rgba(20, 34, 27, 0.12) 55%,
    transparent 100%
  );

  /* Spacing + layout */
  --mp-gap: 1rem;
  --mp-gap-lg: 2rem;
  --mp-maxw: 1180px;
  --mp-radius: 14px;
}