/* Bondfires Design System - CSS Variables
   Based on docs/Brand Kit.js */

:root {
  /* Color Palette */
  --color-primary: #D97736;
  /* Bondfire Copper - CTAs, active states, logo accents */
  --color-primary-dark: #A04E24;
  /* Deep Ember - Gradients, borders, pressed states */
  --color-accent: #F0AB68;
  /* Molten Gold - Highlights, gradient endpoints */
  --color-bg: #141416;
  /* Obsidian - Main page background */
  --color-surface: #1F2023;
  /* Gunmetal - Cards, panels, nav */
  --color-border: #33353A;
  /* Iron - Borders, dividers */
  --color-text: #F3F4F6;
  /* White Smoke - Primary text */
  --color-text-muted: #9CA3AF;
  /* Ash - Secondary text, captions */

  /* Typography */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Spacing (8px base unit) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-primary: 0 4px 14px rgba(217, 119, 54, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;
}

/* Breakpoints for reference (used in media queries) */
/* Mobile: 320px - 767px (default) */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */