/* =================================================================
   iim-tokens.css  -  ImagineInk design token contract (canonical source)
   -----------------------------------------------------------------
   STATUS: This is the source of truth for the design system. The same
   :root block is currently ALSO inlined at the end of iim-rebuild-v2.css so
   the tokens are live without a load-order change. PHASE 5 refactor: load this
   file FIRST (before ai-premium.css and iim-rebuild-v2.css) in htmlstart.php,
   remove the inlined copy from iim-rebuild-v2.css, and migrate ai-premium +
   v2 rules to consume these variables (replacing hardcoded colors/radii/etc.).
   ================================================================= */
:root{
  /* Typography */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-xs:.75rem; --font-sm:.875rem; --font-md:1rem; --font-lg:1.125rem;
  --font-xl:clamp(1.4rem, 1rem + 1.4vw, 1.95rem);
  --font-2xl:clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  --font-hero:clamp(2.5rem, 1.4rem + 3.6vw, 4rem);
  --leading-tight:1.15; --leading-normal:1.6; --leading-relaxed:1.8;

  /* Spacing (4px base) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
  --space-section:clamp(3rem, 5vw, 6rem);
  --container-max:1240px; --reading-max:760px;

  /* Radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(16,40,80,.06);
  --shadow-md:0 12px 30px -16px rgba(15,40,90,.30);
  --shadow-lg:0 30px 60px -34px rgba(15,40,90,.45);

  /* Color */
  --color-primary:#FF6B4A; --color-primary-hover:#ff8753; --color-primary-deep:#e8542f;
  --color-accent:#1CA3DD; --color-accent-bright:#32D4FF; --color-accent-text:#0A6AA1;
  --color-link-on-dark:#ff8a5c; /* accessible coral for text links on dark surfaces: 8.56:1 on #050917 (vs #c2410c = 3.83:1) */
  --color-ink-1:#0f1722; --color-ink-2:#1b2a47;
  --color-bg:#f6f8fc; --color-surface:#ffffff; --color-border:#e6edf7;
  --color-text:#1b2333; --color-text-soft:#46566f; --color-muted:#8493a8;
  --color-on-dark:#eaf1fb; --color-on-dark-soft:rgba(226,236,250,.82); --color-on-dark-muted:rgba(226,236,250,.62);
  --color-success:#1aa06a; --color-warning:#f5a524; --color-danger:#e5484d; --color-info:#1CA3DD;

  /* Motion */
  --motion-fast:.15s; --motion-normal:.25s; --motion-slow:.45s;
  --ease-standard:cubic-bezier(.2,.7,.2,1);
}

/* ---- Phase 3 additions (2026-06-05): breakpoint contract + shared card/cta tokens ---- */
:root{
  /* Breakpoint contract (reference only - CSS vars cannot be used inside @media conditions;
     consolidate NEW media queries around these. De-facto: 1200 dominant, 768/991.98 standard.
     Conflicts to retire over time: 479,575,767,900,1025). */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1200px;
  /* Shared surface tokens consolidated from repeated V2 hardcoded values */
  --radius-card:16px;
  --shadow-card:0 1px 2px rgba(16,40,80,.05);
  --shadow-lift:0 24px 50px -28px rgba(15,40,90,.30);
  --shadow-cta-coral:0 14px 34px -14px rgba(255,107,74,.85);
  --tap-min:44px;
}