/**
 * Mega Platform — Design Tokens (shared, variables only)
 * Build: 20260529-platform-tokens-v1
 *
 * PURPOSE
 *   Single source of truth for the responsive system used by EVERY layout
 *   (layout1 bold, layout2 glass, layout3 minimal, ecom-basic).
 *
 * SAFETY / ISOLATION
 *   This file defines CSS custom properties on :root ONLY. It contains NO
 *   painting selectors, so it can never cause cross-layout visual bleed.
 *   Layouts opt in by referencing these variables; they are free to keep
 *   their own --l2-* / --l3-* / --mega-mod-* names mapped onto these tokens.
 *
 * LOAD ORDER
 *   Must load FIRST, before any layout CSS (so every layer can read tokens).
 *
 * CANONICAL BREAKPOINTS (use these EXACT max-widths in every @media rule)
 *   --bp-phone-s   : 480px   phones (small)
 *   --bp-phone     : 576px   phones
 *   --bp-tablet-p  : 768px   tablet portrait
 *   --bp-tablet-l  : 992px   tablet landscape / small laptop
 *   --bp-desktop   : 1200px  desktop
 *   --bp-desktop-l : 1400px  large desktop
 *   --bp-wide      : 1600px  wide / 4K (min-width, prevents stretch)
 *
 *   NOTE: CSS @media cannot read custom properties, so the numbers above are
 *   the contract. Always write e.g. `@media (max-width: 768px)`, never an
 *   off-standard value like 767px or 760px. The vars below mirror them for
 *   any JS that needs the same numbers.
 */

:root {
  /* ---- Breakpoint mirror (for JS / container queries; NOT for @media) ---- */
  --bp-phone-s: 480px;
  --bp-phone: 576px;
  --bp-tablet-p: 768px;
  --bp-tablet-l: 992px;
  --bp-desktop: 1200px;
  --bp-desktop-l: 1400px;
  --bp-wide: 1600px;

  /* ---- Container max-widths (mobile-first; cap on 4K to avoid stretch) ---- */
  --mega-container-sm: 540px;   /* >=576  */
  --mega-container-md: 720px;   /* >=768  */
  --mega-container-lg: 960px;   /* >=992  */
  --mega-container-xl: 1140px;  /* >=1200 */
  --mega-container-xxl: 1320px; /* >=1400 */
  --mega-container-cap: 1520px; /* hard cap on wide/4K screens */

  /* ---- Spacing scale (8px base; clamp where fluid spacing is desired) ---- */
  --mega-sp-1: 4px;
  --mega-sp-2: 8px;
  --mega-sp-3: 12px;
  --mega-sp-4: 16px;
  --mega-sp-5: 24px;
  --mega-sp-6: 32px;
  --mega-sp-7: 48px;
  --mega-sp-8: 64px;

  /* Fluid gutters used by sections/grids */
  --mega-pad-x: clamp(0.875rem, 3vw, 1.5rem);
  --mega-pad-y: clamp(1rem, 4vw, 2.5rem);
  --mega-gap: clamp(0.75rem, 2.4vw, 1.5rem);

  /* ---- Fluid typography scale (clamp: min, fluid, max) ---- */
  --mega-fs-body: clamp(0.95rem, 0.55vw + 0.85rem, 1.0625rem);
  --mega-fs-small: clamp(0.8rem, 0.4vw + 0.72rem, 0.9rem);
  --mega-fs-lead: clamp(1.05rem, 0.8vw + 0.9rem, 1.25rem);
  --mega-fs-h4: clamp(1.05rem, 1vw + 0.9rem, 1.35rem);
  --mega-fs-h3: clamp(1.25rem, 1.4vw + 1rem, 1.75rem);
  --mega-fs-h2: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
  --mega-fs-h1: clamp(1.85rem, 3.2vw + 1rem, 3rem);
  --mega-fs-hero-title: clamp(2rem, 4.5vw + 1rem, 3.75rem);
  --mega-fs-hero-sub: clamp(1rem, 1.2vw + 0.85rem, 1.375rem);

  --mega-lh-tight: 1.15;
  --mega-lh-base: 1.55;

  /* ---- Radii / elevation ---- */
  --mega-radius-sm: 8px;
  --mega-radius-md: 12px;
  --mega-radius-lg: 18px;
  --mega-radius-pill: 999px;

  /* ---- Touch targets / header sizing contract ---- */
  --mega-hit: 44px;            /* minimum tap target */
  --mega-header-h: 64px;       /* condensed sticky header height baseline */
  --mega-z-header: 2000;       /* single sticky header owner per layout */
  --mega-z-drawer: 3000;       /* mobile nav drawer / off-canvas */
  --mega-z-overlay: 2500;      /* search / backdrop overlays */
}