/**
 * css/variables.css
 * Core design tokens including colors, typography, spacing, and glassmorphism specs.
 */
/* design.md variables mapped to CSS custom properties */
:root {
  /* Brand Colors */
  --color-primary: #2A1E17;        /* Espresso Brown */
  --color-secondary: #F5EBDD;      /* Cream Latte */
  --color-tertiary: #C89B63;       /* Coffee Gold */
  --color-neutral: #111111;        /* Matte Black */
  --color-bg: #0F0F10;             /* Atmospheric Dark Background */
  
  /* Surfaces */
  --color-surface: #171717;
  --color-surface-dim: #141414;
  --color-surface-bright: #232323;
  --color-surface-lowest: #0C0C0D;
  --color-surface-low: #161616;
  --color-surface-container: #1D1D1E;
  --color-surface-high: #262627;
  --color-surface-highest: #313132;
  
  /* Typography Text Colors */
  --text-primary: #F5EBDD;
  --text-secondary: #CFC3B8;
  --text-muted: #8A817B;
  
  /* Borders */
  --border-color: #2F2B28;
  --border-light: rgba(245, 235, 221, 0.1);
  --outline-color: #5C534C;
  --outline-variant: #312C28;
  
  /* Accent Colors */
  --color-accent: #C89B63;
  --color-accent-soft: #E0C29C;
  
  /* Semantic Status Colors */
  --color-success: #A7D7B5;
  --color-warning: #F0C674;
  --color-error: #FF8A80;
  
  /* Glassmorphism Specs */
  --glass-surface: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(245, 235, 221, 0.12);
  --glass-blur: 20px;
  
  /* Overlays */
  --overlay-dark: rgba(0, 0, 0, 0.62);
  --overlay-soft: rgba(0, 0, 0, 0.35);
  
  /* Typography Setup */
  --font-family-heading: 'Playfair Display', Georgia, serif;
  --font-family-body: 'Inter', Satoshi, sans-serif;
  
  /* Spacing */
  --spacing-base: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;
  
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  
  --card-padding: 32px;
  --section-padding: 120px;
  --container-max: 1440px;
  
  /* Responsive Layout Side Margins */
  --margin-desktop: 80px;
  --margin-tablet: 48px;
  --margin-mobile: 20px;

  /* Elevation Shadows */
  --shadow-soft: 0px 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-card: 0px 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0px 0px 60px rgba(200, 155, 99, 0.08);
  --shadow-btn: 0px 8px 24px rgba(245, 235, 221, 0.12);
  
  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-card: 28px;
  --radius-button: 9999px;
  --radius-input: 18px;
  --radius-image: 24px;
  --radius-full: 9999px;
  
  /* Motion & Transitions */
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-normal: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-cinematic: 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}