/* MRFL design tokens. Colours, fonts and sizes read the theme.json presets (--wp--preset--*) with literal fallbacks,
   so editing the palette in theme.json changes the site. Fonts are self-hosted via theme.json fontFace. */
:root{
  /* Neutrals — "the stage" (warm charcoal, granite-derived) */
  --mrfl-color-ink-900:var(--wp--preset--color--ink-900,#111216);
  --mrfl-color-ink-800:var(--wp--preset--color--ink-800,#17181d);
  --mrfl-color-ink-700:var(--wp--preset--color--ink-700,#1f2027);
  --mrfl-color-ink-600:var(--wp--preset--color--ink-600,#2a2b33);
  --mrfl-color-granite:#5f5f59;
  --mrfl-color-line:var(--wp--preset--color--line,#34353d);
  --mrfl-color-wall:var(--wp--preset--color--wall,#dfdfdc);     /* body text on dark */
  --mrfl-color-muted:var(--wp--preset--color--muted,#a9a9a2);    /* secondary text on dark */
  --mrfl-color-wood:#a1876d;

  /* Marble accents — sampled from track pieces & avatar marbles */
  --mrfl-color-blue:var(--wp--preset--color--blue,#1b3691);
  --mrfl-color-blue-bright:#7d97ff; /* text-safe blue on dark */
  --mrfl-color-red:var(--wp--preset--color--red,#d5363c);
  --mrfl-color-crimson:var(--wp--preset--color--crimson,#bb0e1d);
  --mrfl-color-orange:var(--wp--preset--color--orange,#f18f11);
  --mrfl-color-yellow:var(--wp--preset--color--yellow,#f4bd18);
  --mrfl-color-teal:var(--wp--preset--color--teal,#30838b);
  --mrfl-color-teal-bright:var(--wp--preset--color--teal-bright,#5cc3cb);

  /* Format codes (fill / on-fill text) */
  --mrfl-format-elimination:var(--mrfl-color-crimson);   --mrfl-format-elimination-on:#fff;
  --mrfl-format-h2h:var(--mrfl-color-blue);              --mrfl-format-h2h-on:#fff;
  --mrfl-format-tournament:var(--mrfl-color-yellow);     --mrfl-format-tournament-on:var(--mrfl-color-ink-900);
  --mrfl-format-division:var(--mrfl-color-orange);       --mrfl-format-division-on:var(--mrfl-color-ink-900);
  --mrfl-format-long:var(--mrfl-color-teal-bright);      --mrfl-format-long-on:var(--mrfl-color-ink-900);
  --mrfl-format-melee:#6d3fd9;                           --mrfl-format-melee-on:#fff;

  /* Type */
  --mrfl-font-display:var(--wp--preset--font-family--display,"Bricolage Grotesque","Segoe UI",system-ui,sans-serif);
  --mrfl-font-body:var(--wp--preset--font-family--body,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);
  --mrfl-fs-100:.75rem; --mrfl-fs-200:.875rem; --mrfl-fs-300:1rem; --mrfl-fs-400:1.125rem;
  --mrfl-fs-500:clamp(1.375rem,1.1rem + 1vw,1.75rem);
  --mrfl-fs-600:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
  --mrfl-fs-800:clamp(2.5rem,1.6rem + 3.6vw,4.75rem);

  /* Space / shape */
  --mrfl-space-1:.25rem; --mrfl-space-2:.5rem; --mrfl-space-3:.75rem; --mrfl-space-4:1rem;
  --mrfl-space-5:1.5rem; --mrfl-space-6:2rem; --mrfl-space-7:3rem; --mrfl-space-8:4.5rem;
  --mrfl-radius-s:6px; --mrfl-radius-m:12px; --mrfl-radius-l:20px; --mrfl-radius-pill:999px;
  --mrfl-container:1280px;
  --mrfl-gutter:clamp(1rem,.5rem + 2.5vw,2.5rem);
  --mrfl-focus:0 0 0 3px var(--mrfl-color-ink-900),0 0 0 6px var(--mrfl-color-yellow);
  --mrfl-shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.6);
  /* Striped-post motif (the multicolor track posts) */
  --mrfl-stripe:linear-gradient(90deg,var(--mrfl-color-blue) 0 20%,var(--mrfl-color-red) 20% 40%,var(--mrfl-color-orange) 40% 60%,var(--mrfl-color-yellow) 60% 80%,var(--mrfl-color-teal) 80% 100%);
}