/* idea-cycles design tokens — sourced from DESIGN.md (VoltAgent).
   This file is the single source of truth for color/spacing/typography variables
   referenced by every per-cycle HTML page. Do NOT inline hex literals or raw px
   font-sizes in page CSS — use these tokens. See DESIGN.md → Editorial Patterns. */

:root {
  /* Colors — brand & accent */
  --primary: #00d992;
  --on-primary: #050507;
  --primary-hover: #2fd6a1;
  --primary-focus: #10b981;
  --brand-secure: #818cf8;

  /* Colors — surface ladder */
  --canvas: #050507;
  --surface-1: #101010;
  --surface-2: #161616;
  --surface-3: #1a1a1a;
  --surface-4: #1e1e1e;
  --hairline: #3d3a39;
  --hairline-strong: #4a4644;
  --hairline-tertiary: #5c5855;

  /* Colors — text */
  --ink: #f2f2f2;
  --ink-muted: #b8b3b0;
  --ink-subtle: #8b949e;
  --ink-tertiary: #6b7280;

  /* Colors — semantic (use sparingly; success doubles as brand emerald) */
  --semantic-success: #00d992;
  --semantic-overlay: #000000;

  /* Colors — VoltAgent extras (additive — keep at the bottom of this section) */
  --glow-primary: 0 0 8px rgba(0, 217, 146, 0.55);
  --shadow-ambient: 0 0 15px rgba(92, 88, 85, 0.2);
  --shadow-dramatic: 0 20px 60px rgba(0, 0, 0, 0.7);

  /* Spacing scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-xxl: 12px;
  --radius-pill: 9999px;

  /* Typography — font families */
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Typography — type ramp (sizes) */
  --fs-display-xl: 60px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;
  --fs-headline: 24px;
  --fs-card-title: 20px;
  --fs-subhead: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-button: 14px;
  --fs-eyebrow: 13px;
  --fs-mono: 13px;

  /* Typography — leading (ultra-tight on display per VoltAgent) */
  --lh-display-xl: 1.00;
  --lh-display-lg: 1.05;
  --lh-display-md: 1.11;
  --lh-headline: 1.33;
  --lh-card-title: 1.40;
  --lh-subhead: 1.56;
  --lh-body: 1.50;
  --lh-body-relaxed: 1.65;
  --lh-caption: 1.43;

  /* Typography — tracking */
  --tr-display-xl: -0.65px;
  --tr-display-lg: -0.9px;
  --tr-display-md: -0.9px;
  --tr-headline: -0.6px;
  --tr-card-title: -0.2px;
  --tr-subhead: 0;
  --tr-body-lg: 0;
  --tr-body: 0;
  --tr-body-sm: 0;
  --tr-caption: 0;
  --tr-eyebrow: 0.45px;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-text: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
}

html {
  font-family: var(--font-text);
  font-feature-settings: 'calt', 'rlig';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}