/* ==========================================================================
   ZILLIONKINGHOST — DESIGN TOKENS  v3.0 "Modernist"
   Flat, architectural, set entirely in Archivo. Pink #ff3f82 + cyan #00adf0 on warm ground
   #f3f2f2, ink #201e1d, zero corner radius, strong 2px rules, B&W imagery.
   Variable NAMES kept from v2 so all pages keep resolving.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ---------- Accent ramp (red) — primary & secondary collapse to one role ---------- */
  --primary-300: #ff9dc0;
  --primary-400: #ff6ea1;
  --primary-500: #ff3f82;   /* brand primary */
  --primary-600: #d62b67;
  --primary-700: #ab1c4e;

  --secondary-300: #7fd8f9;
  --secondary-400: #3fc2f5;
  --secondary-500: #00adf0;  /* brand secondary */
  --secondary-600: #008cc4;
  --secondary-700: #006c98;

  --cyan-400: #6e6a66;       /* info collapses to neutral */

  /* ---------- Status (muted, ink-adjacent) ---------- */
  --success: #1f7a4d;
  --warning: #a86400;
  --error:   #c4260d;
  --info:    var(--cyan-400);

  /* ---------- Paper scale (warm ground) ---------- */
  --paper-50:  #ffffff;
  --paper-100: #f3f2f2;
  --paper-200: #eae8e6;
  --paper-300: #dcd9d6;

  /* ---------- Gradients — flattened to solid fields ---------- */
  --grad-brand: linear-gradient(var(--primary-500), var(--primary-500));
  --grad-brand-soft: linear-gradient(rgba(255,63,130,.07), rgba(255,63,130,.07));
  --grad-accent: linear-gradient(var(--primary-500), var(--primary-500));
  --grad-hero: linear-gradient(transparent, transparent);
  --grad-text: linear-gradient(#201e1d, #201e1d);

  /* ---------- Typography — Archivo everywhere ---------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Archivo", ui-monospace, monospace;

  --fs-display: clamp(2.9rem, 1.5rem + 4.6vw, 5rem);
  --fs-hero-sub: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 1.7vw, 2.6rem);
  --fs-h3: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-caption: .95rem;
  --fs-eyebrow: .78rem;

  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---------- Spacing ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4.2rem, 3rem + 3.4vw, 7.5rem);
  --container: 76rem;
  --container-wide: 88rem;
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);

  /* ---------- Radius — zero on purpose ---------- */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.3, 1.2, .6, 1);
  --t-fast: 140ms; --t-med: 280ms; --t-slow: 560ms;

  /* ---------- Z ---------- */
  --z-nav: 100; --z-drop: 110; --z-modal: 200; --z-toast: 300;
}

/* ==========================================================================
   SEMANTIC TOKENS — light, flat
   ========================================================================== */
:root {
  color-scheme: light;

  --bg: #f3f2f2;             /* warm architectural ground */
  --bg-alt: #ffffff;
  --bg-raised: #ffffff;

  --surface: #ffffff;
  --surface-strong: #eae8e6;
  --glass: #ffffff;          /* glass is dead; solid paper */
  --glass-border: rgba(32,30,29,.9);
  --glass-blur: 0px;

  --border: rgba(32,30,29,.18);
  --border-strong: #201e1d;
  --divider: #201e1d;

  --text: #201e1d;
  --text-2: #454240;
  --text-3: #6e6a66;
  --text-invert: #ffffff;

  --link: #201e1d;
  --accent-text: var(--primary-700);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary-500);

  --shadow-1: 0 1px 0 rgba(32,30,29,.06);
  --shadow-2: 0 8px 24px rgba(32,30,29,.08);
  --shadow-3: 0 16px 48px rgba(32,30,29,.12);
  --glow-primary: 0 0 0 rgba(0,0,0,0);
  --glow-secondary: 0 0 0 rgba(0,0,0,0);

  --nav-bg: #f3f2f2;
  --card-hover-border: #201e1d;
}