/* ===========================================================================
   Design tokens — Reluduali: maroon ground, hot pink accent
   Harry, 2026-10-09: "Hot Pink and Maroon for the Dominant Color of Reluduali Website."
   Contrast measured on both surfaces: text 14.8:1+, muted 6.0:1+, hot pink 5.1:1+,
   dark text on a hot pink button 5.7:1.
   ---------------------------------------------------------------------------
   Dark, media-forward system. Radius encodes state, not size. Every value in the app resolves here.
   Open gallery.html to edit live.

   CHANGED FROM THE SCAFFOLD: surface-0..3 were an elevation ramp. You used
   them as four different hues, so they've been renamed to what they actually
   are — instance tints, picked per instance like coloured sticky notes.
   Elevation is now carried by the outline and the hard shadow instead.
   =========================================================================== */

:root {
  /* --- Ground ------------------------------------------------------------- */
  --board-bg: #24071a;
  --board-grid: #ffffff0f;
  --board-grid-size: 48px;

  /* --- Chrome -------------------------------------------------------------
     Note: panel is DARKER than page. Instances read as cut into the surface
     rather than raised off it, so media is the only lit thing on screen.    */
  --surface-page: #3b0d1f;
  --surface-panel: #2a0915;
  --surface-sunken: #ffffff0d;

  /* --- Instance tints -----------------------------------------------------
     All four are currently black — the tint system is effectively off, and
     separation comes from --line alone. Leaving the slots wired up so tints
     can come back without touching a component.                             */
  --tint-cream: #000000;
  --tint-pink: #000000;
  --tint-butter: #000000;
  --tint-sky: #000000;
  --tint-default: var(--tint-cream);

  /* --- Text --------------------------------------------------------------- */
  --text-primary: #fdeef4;
  --text-secondary: #fdeef4bf;
  --text-muted: #fdeef499;
  --text-on-accent: #2a0612;

  /* --- Accent ------------------------------------------------------------- */
  --accent: #ff3fa4;
  --accent-dim: #8a1f52;

  /* --- Roles -------------------------------------------------------------- */
  --danger: #ff8f7a;
  --success: #7fd6a4;
  --warning: #ffc46b;

  /* --- Lines -------------------------------------------------------------- */
  --line: #5a1a33;
  --line-strong: #7a2546;
  --line-width: 1px;

  /* --- Radius -------------------------------------------------------------
     NOT a size scale. A STATE scale.

       round = dormant, minimized, backgrounded
       sharp = active, focused, foreground

     Named for meaning so components can't pick the wrong one. Radius
     animates on state change, so keep --motion-base honest.                 */
  --radius-active: 6px;
  --radius-resting: 12px;
  --radius-minimized: 22px;
  --radius-pill: 999px;

  /* --- Depth --------------------------------------------------------------
     One axis drives four things: corner sharpness, image softness, which
     asset variant is fetched, and cache eviction priority.

     Softness is NOT a CSS blur filter — an instance further back renders
     from its thumbnail variant scaled up. Same read, no GPU layer per
     instance, and backgrounded content never loads full assets.

     These values describe the intended look at each depth band. The renderer
     picks the variant; only --depth-*-dim is applied as CSS.                 */
  --depth-0-radius: var(--radius-active);
  --depth-0-dim: 0;
  --depth-0-blur: 0px;
  --depth-0-variant: full;

  --depth-1-radius: var(--radius-resting);
  --depth-1-dim: 0.18;
  --depth-1-blur: 1px;
  --depth-1-variant: thumbnail;

  --depth-2-radius: var(--radius-minimized);
  --depth-2-dim: 0.38;
  --depth-2-blur: 2.5px;
  --depth-2-variant: placeholder;

  /* Veil colour laid over backgrounded instances at --depth-N-dim opacity. */
  --depth-veil: #1a050c;

  /* --- Spacing ------------------------------------------------------------ */
  --space-unit: 4px;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-12: calc(var(--space-unit) * 12);
  --touch-target: 44px; /* smallest comfortable tap size on a phone (Apple's HIG minimum) */

  /* --- Type --------------------------------------------------------------- */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;

  --type-base: 16px;
  --type-scale: 1.2;
  --type-xs: calc(var(--type-base) / var(--type-scale));
  --type-sm: var(--type-base);
  --type-md: calc(var(--type-base) * var(--type-scale));
  --type-lg: calc(var(--type-base) * var(--type-scale) * var(--type-scale));
  --type-xl: calc(var(--type-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));

  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 800;
  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* --- Motion ------------------------------------------------------------- */
  --motion-fast: 90ms;
  --motion-base: 240ms;
  --motion-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0.15, 1);

  /* --- Elevation ----------------------------------------------------------
     Back to soft shadows now the outlines are dark-on-dark rather than solid
     black. Hard offsets need a high-contrast outline to read against.                           */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 6px 18px rgb(0 0 0 / .55);
  --shadow-3: 0 16px 40px rgb(0 0 0 / .65);

  --focus-ring: 0 0 0 1px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}