/* site-tokens.css: unmodified copy of design-system/tokens.css, the CSS
   custom properties site-chrome.css and site-btn-glow.css need (--space-*,
   --text-*, --font-sans, --radius-*, --accent, --bg, --fg, --hairline,
   --ease-*, --dur-*). Pure :root variable declarations, no selectors, so
   nothing here can restyle blog content on its own. */

/* tokens.css — Cryenx design system, generated by extract.py */
/* Source: cryenx-export-v2/*.html — re-run extract.py to refresh. */

:root {
  /* ---- Core palette ---- */
  --bg: rgb(0, 0, 0);
  --fg: rgb(255, 255, 255);
  --accent: #6aa8ff;
  --accent-cyan: rgb(51, 194, 255);

  /* ---- White-with-alpha ladder (muted text → hairlines → borders) ---- */
  --muted-93: rgba(255, 255, 255, 0.93);
  --muted-75: rgba(255, 255, 255, 0.75);
  --muted-70: rgba(255, 255, 255, 0.7);
  --hairline-20: rgba(255, 255, 255, 0.2);
  --border-10: rgba(255, 255, 255, 0.1);
  --border-06: rgba(255, 255, 255, 0.06);
  --border-05: rgba(255, 255, 255, 0.05);
  --muted: var(--muted-93);
  --hairline: var(--hairline-20);
  --border: var(--border-10);

  /* ---- Accent tint (10% opacity surface fill, matches --accent) ---- */
  --accent-tint: rgba(106, 168, 255, 0.10);
  --accent-tint-strong: rgba(106, 168, 255, 0.18);

  /* ---- Pre-AI / Post-AI dual track (industry pages) ----
     Hand-added; extract.py regeneration won't clobber. Violet was the
     original Framer brand accent (used 275x); cyan is from the export. */
  --accent-violet: rgb(91, 113, 235);
  --accent-violet-tint: rgba(91, 113, 235, 0.08);
  --accent-cyan-tint: rgba(51, 194, 255, 0.08);

  /* ---- Typography ---- */
  --font-display: "Clash Grotesk", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid typography. clamp(MIN_mobile, fluid_growth, MAX_desktop).
     Fluid growth is linear interpolation from ~375px viewport (mobile) to
     ~1440px (large desktop). MIN holds at small screens, MAX caps on big
     displays. xs and sm stay fixed — they're at the readability floor and
     shouldn't scale below 11px. base+ scale modestly; headings scale more
     aggressively for marketing-hero impact on desktop. */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: clamp(15px, 0.09vw + 14.65px, 16px);
  --text-md: clamp(16px, 0.19vw + 15.3px, 18px);
  --text-lg: clamp(18px, 0.28vw + 16.9px, 21px);
  --text-xl: clamp(20px, 0.38vw + 18.6px, 24px);
  --text-2xl: clamp(24px, 0.47vw + 22.2px, 29px);
  --text-3xl: clamp(28px, 0.66vw + 25.5px, 35px);
  --text-4xl: clamp(32px, 0.94vw + 28.5px, 42px);
  --text-5xl: clamp(40px, 1.5vw + 34.4px, 56px);
  --text-6xl: clamp(48px, 2.25vw + 39.55px, 72px);

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

  /* ---- Border radii ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 40px;
  --radius-pill: 100px;

  /* ---- Motion ----
     Framer generates curves at runtime in JS, so they don't appear as literal
     CSS values in the exported HTML. These are the canonical curves used by the
     Raycast-style prototype (see _prototypes/solution-card.html) — adopt them as
     the project standard. Add more here as new patterns get authored. */
  --ease-out-expo: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 1200ms;
  --dur-slower: 2000ms;
}