/* Design Tokens — exported/mirrored from Figma
   These variables are the single source of truth for colors, type, spacing, radii & shadows.
   Update values here to change the look app‑wide. */

:root {
  /* 🎨 Colors */
  --bg: #0b0d12;           /* App background */
  --surface: #121623;      /* Cards/panels */
  --text: #e8ebf1;         /* Primary text */
  --muted: #a8b0c2;        /* Secondary text */
  --brand: #7affc2;        /* Accent/brand */
  --brand-600: #32e6a0;    /* Accent hover/active */
  --danger: #ff6b6b;       /* Errors/destructive */

  /* ✍️ Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --fs-xxl: clamp(28px, 4vw, 44px); /* hero */
  --fs-xl: 28px;  /* h2 */
  --fs-lg: 20px;  /* h3 */
  --fs-md: 16px;  /* body */
  --fs-sm: 14px;  /* captions */

  /* 📏 Spacing scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* 🧱 Radius & Shadows */
  --radius: 10px;
  --shadow-1: 0 6px 20px rgba(0,0,0,.35);

  /* 🌄 Hero Panel */
  --hero-height: 220px;
  --hero-height-lg: 280px;
  --hero-bg-image: url('/images/hero.jpg');
  --hero-bg-size: cover;
  --hero-bg-position: center;

  /* Extended brand scale */
  --brand-700: #28c98f;

  /* 🔘 Buttons */
  --btn-font-size: var(--fs-lg);
  --btn-padding-y: var(--space-4);
  --btn-padding-x: var(--space-8);
  --btn-radius: var(--radius);
  --btn-shadow: var(--shadow-1);

  /* Primary Button */
  --btn-primary-bg: var(--brand);
  --btn-primary-fg: var(--bg);
  --btn-primary-hover-bg: var(--brand-600);

  /* Focus & Effects */
  --focus-ring: 0 0 0 3px rgba(122, 255, 194, 0.35);

  /* CTA layout helpers */
  --cta-margin-block: var(--space-8);
}