/* ============================================================
   OFG / CREATIVE SYSTEM 001 — DESIGN TOKENS
   Colour, type, spacing and motion. Everything inherits here.
   ============================================================ */

:root {
  /* ---- CORE COLOUR PALETTE (from OFG brief) ---- */
  --ofg-coral:  #FF6B67;  /* primary energetic field   */
  --ofg-powder: #A9D5EA;  /* open space / calm contrast */
  --ofg-navy:   #26365F;  /* editorial depth            */
  --ofg-cream:  #F4F1EA;  /* paper / gallery walls      */
  --ofg-black:  #111111;  /* typography / hard geometry */
  --ofg-pink:   #E71D64;  /* mischief / hover / discovery */
  --ofg-yellow: #FFD447;  /* play / rewards / collectibles */

  /* semantic roles (swap these per game-world, not the raw hues) */
  --bg:        var(--ofg-cream);
  --ink:       var(--ofg-black);
  --accent:    var(--ofg-pink);
  --field-1:   var(--ofg-powder);
  --field-2:   var(--ofg-coral);
  --field-3:   var(--ofg-cream);

  /* ---- TYPE ---- */
  --font-display: "Space Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Archivo", system-ui, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "Cascadia Mono", monospace;

  /* fluid display scale — words are meant to occupy 30–60% of viewport */
  --step-micro: clamp(0.68rem, 0.62rem + 0.3vw, 0.8rem);   /* OFG / 001 */
  --step-small: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  --step-body:  clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  --step-lead:  clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
  --step-huge:  clamp(3.5rem, 1rem + 18vw, 20rem);         /* ONLY / FUN / GAMES */

  --weight-reg:  400;
  --weight-med:  500;
  --weight-bold: 700;

  --tracking-tight: -0.04em;
  --tracking-wide:  0.22em;   /* micro editorial copy */
  --leading-solid:  0.82;     /* stacked giant words  */
  --leading-body:   1.5;

  /* ---- SPACING (8pt-ish, but editorial-generous) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 10rem;
  --gutter:  clamp(1rem, 0.5rem + 3vw, 3rem);

  /* ---- MOTION ---- */
  --dur-fast:  150ms;
  --dur-mid:   320ms;
  --dur-slow:  500ms;
  --dur-scene: 850ms;   /* major panel / colour transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);       /* snappy graphic */
  --ease-hard: cubic-bezier(0.7, 0, 0.3, 1);        /* hard cut feel  */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);   /* playful overshoot */

  /* ---- LAYERING ---- */
  --z-field:   0;
  --z-type:    10;
  --z-sprite:  20;
  --z-nav:     40;
  --z-overlay: 60;

  --pixel: 6px; /* base unit for sprite / pixel geometry */
}

/* Sprites must never blur. */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }