/* ==========================================================================
   AudiTax Design Tokens — Centralized Dynamic Branding System
   ========================================================================== */

:root {
  /* Brand Core Palettes (Default: Light Prestige / Navy & Gold) */
  --primary: #0B192C;
  --primary-rgb: 11, 25, 44;
  --primary-light: #152844;
  --primary-dark: #060E1A;

  --secondary: #1E293B;
  --secondary-rgb: 30, 41, 59;
  --secondary-light: #334155;
  --secondary-dark: #0F172A;

  --accent: #C5A880;
  --accent-rgb: 197, 168, 128;
  --accent-hover: #B39364;
  --accent-subtle: rgba(197, 168, 128, 0.12);
  --accent-border: rgba(197, 168, 128, 0.3);

  /* Backgrounds & Surfaces */
  --background: #FDFBF7;
  --background-alt: #F4F6F9;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-subtle: #F8FAFC;
  --surface-overlay: rgba(11, 25, 44, 0.7);
  --surface-glass: rgba(255, 255, 255, 0.92);

  /* Footer Colors (Default Light) */
  --footer-bg: #F4F6F9;
  --footer-text: #0F172A;
  --footer-text-muted: #64748B;
  --footer-border: #E2E8F0;

  /* Typography Colors */
  --text: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #CBD5E1;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #CBD5E1;

  /* Borders & Dividers */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: var(--accent);

  /* Functional Status */
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --error: #EF4444;
  --error-bg: rgba(239, 68, 68, 0.1);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #F4F6F9 55%, #EEF2F6 100%);
  --gradient-gold: linear-gradient(135deg, #C5A880 0%, #E2CFBA 50%, #C5A880 100%);
  --gradient-gold-hover: linear-gradient(135deg, #B39364 0%, #D4AF37 50%, #B39364 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-glow: radial-gradient(circle at 50% 30%, rgba(197, 168, 128, 0.15) 0%, transparent 70%);

  /* Spacing Scale */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6rem;     /* 96px */

  /* Border Radii (Sophisticated, precise, not bubbly) */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Shadows (Depth & Elevation) */
  --shadow-sm: 0 1px 3px rgba(11, 25, 44, 0.05), 0 1px 2px rgba(11, 25, 44, 0.03);
  --shadow-md: 0 4px 16px -2px rgba(11, 25, 44, 0.08), 0 2px 6px -1px rgba(11, 25, 44, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(11, 25, 44, 0.12), 0 4px 12px -2px rgba(11, 25, 44, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(11, 25, 44, 0.18);
  --shadow-accent: 0 8px 24px -4px rgba(197, 168, 128, 0.35);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container Constraints */
  --container-max-width: 1280px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* Header Constraints */
  --header-height: 80px;
}

@media (max-width: 640px) {
  :root {
    --header-height: 68px;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 64px;
  }
}