/* =====================================================================
   ApexForm Life — Design Tokens (web)
   SINGLE SOURCE OF TRUTH for the web layer. Generated from
   design-tokens/apexform.tokens.json. Official brand fonts:
   Clash Display (display/headings) + Satoshi (body) — matching
   the live apexformlife.com site.
   ===================================================================== */

/* --- Brand fonts -------------------------------------------------------
   Clash Display + Satoshi are SELF-HOSTED here (woff2, ttf fallback) and
   this file is the single source for them across the site. Do not add the
   Fontshare clash-display/satoshi link back to any page — a later
   cross-origin @font-face for the same family shadows these and makes
   first paint depend on a third-party CDN. (Fontshare remains, async, only
   for Zodiak on the pages that use serif pull-quotes.)
*/
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/design-system/fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('/assets/design-system/fonts/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/design-system/fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('/assets/design-system/fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/design-system/fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('/assets/design-system/fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/design-system/fonts/Satoshi-Regular.woff2') format('woff2'),
       url('/assets/design-system/fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/design-system/fonts/Satoshi-Medium.woff2') format('woff2'),
       url('/assets/design-system/fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/design-system/fonts/Satoshi-Bold.woff2') format('woff2'),
       url('/assets/design-system/fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* JetBrains Mono (mono accents, eyebrows, code) — SELF-HOSTED variable file
   whose wght axis covers 400–800 per subset. Latin + latin-ext only, by
   design (English-language site; other scripts fall back gracefully via
   unicode-range). Do not add the Google Fonts link back to any page; these
   faces replace it site-wide. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/design-system/fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/design-system/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Primitives --- */
  --primitive-black-950: #06070b;
  --primitive-navy-900: #0b1020;
  --primitive-violet-850: #121126;
  --primitive-white-1000: #f3f7ff;
  --primitive-slate-400: #a9b4cc;
  --primitive-slate-600: #6e7a95;
  --primitive-cyan-500: #4fe3ff;
  --primitive-gold-500: #f4b544;
  --primitive-violet-500: #8a7cff;
  --primitive-green-500: #47d18c;
  --primitive-amber-500: #ffb454;
  --primitive-rose-500: #ff5e7a;

  /* --- Semantic colour --- */
  --color-bg-primary: var(--primitive-black-950);
  --color-bg-secondary: var(--primitive-navy-900);
  --color-bg-tertiary: var(--primitive-violet-850);
  --color-surface-solid: #111522;
  --color-surface-glass: rgba(255, 255, 255, 0.08);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.12);
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-active: rgba(79, 227, 255, 0.45);
  --color-text-primary: var(--primitive-white-1000);
  --color-text-secondary: var(--primitive-slate-400);
  --color-text-tertiary: var(--primitive-slate-600);
  --color-action-primary: var(--primitive-cyan-500);
  --color-action-secondary: var(--primitive-violet-500);
  --color-signal-progress: var(--primitive-gold-500);
  --color-status-success: var(--primitive-green-500);
  --color-status-warning: var(--primitive-amber-500);
  --color-status-error: var(--primitive-rose-500);

  /* --- Brand gradient (cyan -> violet -> gold convergence) --- */
  --brand-gradient: linear-gradient(100deg, #4FE3FF 0%, #6B8CFF 32%, #8A7CFF 55%, #C79AB0 78%, #F4B544 100%);

  /* --- Font families (SINGLE SOURCE OF TRUTH) --- */
  --font-display: 'Clash Display', 'Arial', sans-serif;   /* headings / display */
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif; /* body / UI text */

  /* --- Spacing --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* --- Radius --- */
  --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-5: 20px;
  --radius-6: 24px; --radius-8: 32px; --radius-full: 999px;

  /* --- Type tokens (Clash Display for display/title/heading; Satoshi for body/label/micro) --- */
  --text-display-lg: 700 40px/44px var(--font-display);
  --text-display-md: 600 32px/36px var(--font-display);
  --text-title-lg: 600 28px/32px var(--font-display);
  --text-title-md: 600 24px/28px var(--font-display);
  --text-heading-sm: 500 20px/24px var(--font-display);
  --text-body-lg: 500 17px/24px var(--font-body);
  --text-body-md: 400 16px/22px var(--font-body);
  --text-body-sm: 500 14px/20px var(--font-body);
  --text-label-md: 500 13px/16px var(--font-body);
  --text-label-sm: 500 12px/14px var(--font-body);
  --text-micro: 500 11px/12px var(--font-body);

  /* --- Motion --- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-medium: 240ms;
  --motion-slow: 320ms;
  --motion-loop-capture: 1200ms;
  --motion-curve-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-curve-swift: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Effects --- */
  --effect-glow-cyan: 0 0 24px rgba(79, 227, 255, 0.24);
  --effect-glow-gold: 0 0 20px rgba(244, 181, 68, 0.2);
  --effect-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.36);
  --effect-shadow-deep: 0 20px 48px rgba(0, 0, 0, 0.5);
  --effect-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* --- Global accessibility safety net -----------------------------------
   This file is loaded by EVERY page (marketing, forum, blog), so keyboard
   focus and reduced-motion are guaranteed even on pages that don't ship
   page.css. Page-level styles may refine these, never remove them. */
:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}