/* ============================================================
   CBJJ DESIGN TOKENS — single source of truth
   ------------------------------------------------------------
   Created 2026-06-08 during the UI/framework re-audit.
   Goal: replace the 13 duplicated inline :root blocks (one per
   HTML page) + the parallel --cbjj-* set with ONE canonical
   token layer, and add the spacing / type / rhythm scales the
   site never had.

   SAFETY: every legacy value below is identical to what the
   pages already use, so linking this file changes nothing on
   its own. The NEW scales (--space-*, --text-*, --section-y,
   --z-*) are purely additive. Color UNIFICATION (collapsing the
   3 near-black inks into one) is intentionally NOT forced here —
   see cbjj-tokens "RECOMMENDED" notes; flip them during the
   Codex visual pass.

   Load order (every page): cbjj-tokens.css  ->  cbjj-enhance.css
   ->  cbjj-system.css. Linking tokens FIRST lets a page delete
   its inline :root block and inherit from here with no drift.
   ============================================================ */

:root {
  /* ---- Brand color (canonical = current production values) ---- */
  --blue: #0052FF;
  --blue-d: #003BB5;
  --blue-l: #E8F0FF;
  --accent: #FF5A1F;
  --accent-d: #E94A0F;
  --green: #00A651;
  --gold: #F5C24A;

  /* ---- Ink / neutral ramp ---- */
  --ink: #0A1628;            /* primary text + dark sections (canonical) */
  --ink-2: #1B2A4A;
  --gray-1: #475569;
  --gray-2: #64748B;
  --gray-3: #94A3B8;
  --gray-4: #CBD5E1;
  --line: #E5E9F0;
  --bg: #FFFFFF;
  --bg-2: #F8FAFC;          /* alternating section tint */
  --bg-3: #F1F5FB;          /* NEW: card image-well backdrop (kills harsh white-on-white) */

  /* ---- Dark surfaces ----
     RECOMMENDED: collapse the 3 near-blacks the site ships today
     (hero #07111F, tech #0A1628, footer #071323) into one. Use
     --surface-ink everywhere a section goes dark. */
  --surface-ink: #0A1628;
  --surface-ink-soft: #111F38;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, .05);
  --shadow: 0 8px 30px rgba(10, 22, 40, .06);
  --shadow-card: 0 12px 36px rgba(10, 22, 40, .08);
  --shadow-lg: 0 20px 60px rgba(0, 82, 255, .10);
  --shadow-pop: 0 24px 70px rgba(10, 22, 40, .18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-1: .15s;
  --dur-2: .25s;
  --dur-3: .4s;

  /* ============ NEW: SPACING SCALE (4px base) ============
     Replaces hand-picked paddings (the audit found 70/72/74/80/
     100/110 used interchangeably). Snap everything to this. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ---- Section vertical rhythm (ONE fluid value, not six) ---- */
  --section-y: clamp(64px, 8vw, 112px);
  --section-y-sm: clamp(48px, 6vw, 80px);
  --section-y-lg: clamp(80px, 10vw, 140px);

  /* ============ NEW: TYPE SCALE ============
     The audit found 26 distinct sizes on the homepage and 33 on
     the product page. Use ONLY these steps. */
  --text-xs: 0.75rem;       /* 12px  — meta / legal */
  --text-sm: 0.8125rem;     /* 13px  — captions, chips */
  --text-base: 0.9375rem;   /* 15px  — body */
  --text-md: 1rem;          /* 16px  — emphasised body */
  --text-lg: 1.125rem;      /* 18px  — lead-ins */
  --text-xl: 1.375rem;      /* 22px  — card titles */
  --text-2xl: 1.75rem;      /* 28px  — h3 / sub-section */
  --text-3xl: clamp(28px, 3.4vw, 40px);  /* h2 */
  --text-4xl: clamp(36px, 4.6vw, 56px);  /* section hero */
  --text-5xl: clamp(42px, 5.6vw, 66px);  /* page hero h1 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --measure: 68ch;          /* max line length for body copy */

  /* ---- Font weights (semantic) ----
     RECOMMENDED: retire 650 and 900. Heaviest UI weight = 800,
     reserved for h1/h2 only. The audit found 186 elements at
     800/900 — that ultra-bold density is what reads as "shouty". */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Font families (ONE definition; the audit found 7) ---- */
  --font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;

  /* ---- Layout ---- */
  --shell: 1200px;          /* canonical content width (premium, tighter than 1280) */
  --shell-narrow: 1040px;
  --shell-text: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --w: 1280px;              /* legacy alias, kept so existing .w wrappers don't shift */

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ============ BACK-COMPAT ALIASES ============
     The old --cbjj-* names map onto the canonical set so the 1400+
     existing references keep resolving. Delete these once the
     codebase no longer references --cbjj-*. */
  --cbjj-navy: var(--ink);
  --cbjj-blue: var(--blue);
  --cbjj-orange: var(--accent);
  --cbjj-line: var(--line);
  --cbjj-muted: var(--gray-2);
}