/* 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;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 48px;

  /* ---- 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;
}