/* ShapeMorph landing — design tokens */

:root {
  /* Base world */
  --bg-0: #050810;
  --bg-1: #0f172a;
  --bg-2: #1e293b;
  --line: rgba(148, 163, 184, 0.14);
  --text-1: #f1f5f9;
  --text-2: #a7b2c5;
  --text-3: #7d8ba1;

  /* Fusion chain (game data, constants.ts) */
  --tier-1: #ef4444;
  --tier-2: #f97316;
  --tier-3: #eab308;
  --tier-4: #84cc16;
  --tier-5: #22c55e;
  --tier-6: #10b981;
  --tier-7: #06b6d4;
  --tier-8: #3b82f6;
  --tier-9: #8b5cf6;
  --tier-10: #ec4899;

  /* N'Joy / prizes */
  --gold: #f59e0b;
  --gold-soft: #fbbf24;

  /* Type */
  --font-display: "Archivo", "Archivo Black", sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-hud: "Orbitron", monospace;

  --step-hero: clamp(3.4rem, 11vw, 10.5rem);
  --step-h2: clamp(2.2rem, 5.6vw, 4.6rem);
  --step-h3: clamp(1.15rem, 2vw, 1.5rem);
  --step-body: clamp(1rem, 1.15vw, 1.125rem);
  --step-small: 0.8125rem;
  --step-eyebrow: 0.75rem;

  /* Layout */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section-gap: clamp(6rem, 16vh, 11rem);
  --radius: 18px;
  --radius-lg: 28px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dynamic accent — declared on body so the derived colors see the
   body[data-tier] override (custom-property substitution happens at the
   declaring element, so :root would freeze them on tier 1). */
body {
  --accent: var(--tier-1);
  --accent-soft: color-mix(in srgb, var(--accent) 55%, #ffffff 45%);
  --accent-dim: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Accent follows the chain as the visitor scrolls */
body[data-tier="1"]  { --accent: var(--tier-1); }
body[data-tier="2"]  { --accent: var(--tier-2); }
body[data-tier="3"]  { --accent: var(--tier-3); }
body[data-tier="4"]  { --accent: var(--tier-4); }
body[data-tier="5"]  { --accent: var(--tier-5); }
body[data-tier="6"]  { --accent: var(--tier-6); }
body[data-tier="7"]  { --accent: var(--tier-7); }
body[data-tier="8"]  { --accent: var(--tier-8); }
body[data-tier="9"]  { --accent: var(--tier-9); }
body[data-tier="10"] { --accent: var(--tier-10); }