/* ============================================================
   Casel Marketing — Design Tokens (R6)
   Two-face type system: Apoc Revelations (display) + Inter (body).

   The display face — flagged: shipping with Bricolage Grotesque as a
   placeholder because Pangram Pangram's Apoc Revelations is gated
   behind a TypeTrials account. When the Apoc license is acquired,
   swap the single `--font-display` value below and the Apoc face
   loads transparently across hero wordmark, section headlines, the
   §03 stat moment, pricing big numbers, and the footer wordmark.

   Apoc URL contract for future-self:
     - self-host WOFF2 under apps/marketing/assets/fonts/apoc/
     - declare in apps/marketing/styles/typography.css @font-face
     - swap `--font-display` value to 'Apoc Revelations'
   ============================================================ */

:root {
  /* ---------- Palette: the Chamber ---------- */
  --color-chamber-navy: #1a1a2e;       /* base background — the room */
  --color-blue-steel: #16213e;         /* panels / cards */
  --color-lifted: #1f2547;             /* hover / raised */
  --color-input: #0f1024;              /* deeper, input-dark */

  --color-red: #e94560;                /* Casel Red — the spotlight */
  --color-red-700: #c8334d;
  --color-red-glow: rgba(233, 69, 96, 0.55);

  /* v7 — warm amber as figurative-image tertiary */
  --color-amber: #f4a261;
  --color-amber-warm: #e76f51;
  --shadow-jewel-red: 0 60px 120px -30px rgba(233, 69, 96, 0.18);
  --shadow-jewel-amber: 0 0 0 1px rgba(244, 162, 97, 0.08);

  --color-fg: #f3f3f8;                 /* near white */
  --color-fg-strong: #ffffff;
  --color-muted: #a5a5c2;              /* WCAG AA on chamber-navy */
  --color-muted-soft: rgba(165, 165, 194, 0.7);
  --color-muted-softer: rgba(165, 165, 194, 0.45);

  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-row-divider: rgba(255, 255, 255, 0.05);

  /* ---------- Typography — two-face system (R6) ---------- */

  /* Display face — Apoc-set moments. Currently Bricolage Grotesque
     (Google Fonts, free commercial) as a placeholder; swap to
     'Apoc Revelations' when the Pangram Pangram license is in. */
  --font-display:
    'Bricolage Grotesque', 'Apoc Revelations',
    'Times New Roman', serif;

  /* Body face — UI, microcopy, captions, in-app artifacts. */
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Apoc roles — display-face sizes */
  --fs-microlabel: 13px;
  --fs-headline-section: clamp(2.25rem, 4.4vw + 0.5rem, 4.5rem);  /* 36 → 72 */
  --fs-stat: clamp(3rem, 8vw + 0.5rem, 9rem);                     /* 48 → 144 */
  --fs-wordmark-hero: clamp(3.25rem, 8.4vw + 0.5rem, 9rem);       /* 52 → 144 */
  --fs-wordmark-footer-it: clamp(2rem, 5.5vw + 0.25rem, 5.5rem); /* v8: 32 → 88 — shrunk to let doorway breathe */
  --fs-wordmark-footer-en: clamp(2.75rem, 7vw + 0.25rem, 7rem);  /* v8: 44 → 112 — shrunk to match */
  --fs-pricing-tier: clamp(1.125rem, 1vw + 0.5rem, 1.75rem);     /* 18 → 28 */
  --fs-pricing-num: clamp(3rem, 5vw + 0.5rem, 5.5rem);           /* 48 → 88 */
  --fs-quote: clamp(1.625rem, 2.6vw + 0.5rem, 3.5rem);           /* 26 → 56 */

  /* Inter roles — body-face sizes */
  --fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);             /* 16 → 18 */
  --fs-small: 0.875rem;
  --fs-cta: 0.875rem;
  --fs-nav: 0.875rem;

  /* line heights */
  --lh-wordmark: 0.92;
  --lh-headline: 0.98;
  --lh-stat: 0.92;
  --lh-body: 1.55;
  --lh-tight: 1.0;

  /* tracking */
  --tracking-wordmark: -0.02em;
  --tracking-headline: -0.018em;
  --tracking-microlabel: 0.28em;
  --tracking-stat: -0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --section-py: clamp(4rem, 8vw, 9rem);

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Depth (sparingly) ---------- */
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 360ms;
  --dur-slow: 600ms;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 1080px;
  --gutter: clamp(1rem, 4vw, 3rem);
}