/* Design Tokens - Converted from Tailwind Config */
:root {
  /* Color Palette */
  --color-charcoal: #1B1B1D;
  --color-offwhite: #F4F2EA;
  --color-brass: #C8A674;
  --color-brass-light: #D4B896;
  --color-text-primary: #F7F7F5;
  --color-text-secondary: #B9B5AA;
  
  /* HSL Colors (from Tailwind config) */
  --background: 0 0% 11%;
  --foreground: 40 14% 96%;
  --card: 0 0% 11%;
  --card-foreground: 40 14% 96%;
  --popover: 0 0% 11%;
  --popover-foreground: 40 14% 96%;
  --primary: 40 36% 62%;
  --primary-foreground: 0 0% 11%;
  --secondary: 40 10% 92%;
  --secondary-foreground: 0 0% 11%;
  --muted: 0 0% 18%;
  --muted-foreground: 40 8% 72%;
  --accent: 40 36% 62%;
  --accent-foreground: 0 0% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 22%;
  --input: 0 0% 22%;
  --ring: 40 36% 62%;
  
  /* Border Radius */
  --radius: 1.75rem;
  --radius-xs: calc(var(--radius) - 6px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
  --radius-4xl: 2.5rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  
  /* Box Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);
  --shadow-card-lg: 0 32px 80px rgba(0, 0, 0, 0.45);
  --shadow-card-mobile: 0 12px 40px rgba(0, 0, 0, 0.25);
  
  /* Breakpoints (for reference in JS) */
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Spacing */
  --spacing-section-y: clamp(5rem, 10vh, 8rem);
  --spacing-section-x: clamp(1rem, 6vw, 6rem);
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index layers */
  --z-preloader: 9999;
  --z-cursor: 9998;
  --z-mobile-menu: 100;
  --z-header: 50;
  --z-section-base: 10;
}