@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital,wght@1,400&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Better Habits Fitness Design Tokens v1.0
   Source: Better Habits Fitness Style Guide v1.0, May 2026.
   Treat these variables as canonical. Add new tokens here before using them elsewhere. */
:root {
  /* Color */
  --bh-purple: #9C68D8;
  --bh-purple-deep: #6B3FB0;
  --bh-purple-soft: #C6A5EE;
  --bh-lilac: #EDE5F0;
  --bh-ink: #2A1F3A;
  --bh-ink-soft: #3A2F44;
  --bh-mute: #6E6573;
  --bh-rule: #DDD0E0;
  --bh-rule-cool: #E3DDE9;
  --bh-paper-warm: #F5F0F5;
  --bh-paper-cool: #FAF8FB;
  --bh-white: #FFFFFF;

  /* On-dark utility colors */
  --bh-on-dark-15: rgba(255, 255, 255, 0.15);
  --bh-on-dark-55: rgba(255, 255, 255, 0.55);
  --bh-on-dark-75: rgba(255, 255, 255, 0.75);

  /* Typography roles */
  --bh-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --bh-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bh-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --bh-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --bh-text-6xl: clamp(76px, 11vw, 132px);
  --bh-text-5xl: clamp(64px, 8vw, 96px);
  --bh-text-4xl: clamp(48px, 6vw, 64px);
  --bh-text-3xl: 48px;
  --bh-text-2xl: 32px;
  --bh-text-xl: 24px;
  --bh-text-lg: 20px;
  --bh-text-base: 16px;
  --bh-text-sm: 14px;
  --bh-text-2xs: 11px;

  /* 8pt spacing scale */
  --bh-space-1: 4px;
  --bh-space-2: 8px;
  --bh-space-3: 16px;
  --bh-space-4: 24px;
  --bh-space-5: 32px;
  --bh-space-6: 48px;
  --bh-space-7: 64px;
  --bh-space-8: 96px;
  --bh-space-9: 128px;

  /* Radius */
  --bh-radius-sm: 8px;
  --bh-radius-md: 12px;
  --bh-radius-lg: 16px;
  --bh-radius-xl: 24px;
  --bh-radius-pill: 999px;

  /* Layout */
  --bh-container: 1280px;
  --bh-gutter-desktop: 64px;
  --bh-gutter-mobile: 24px;
  --bh-section-pad-y: 96px;
  --bh-section-pad-y-lg: 128px;

  /* Shadow: use sparingly; only for preview/window-like elements and small floating badges. */
  --bh-shadow-preview: 0 24px 60px -12px rgba(42, 31, 58, 0.18);
}