/* ============================================
   ONYXA AI — Design Tokens
   ============================================ */

:root {
  /* Brand Colors */
  --color-black: #000000;
  --color-dark: #0a0a0a;
  --color-charcoal: #555555;
  --color-mid-grey: #888888;
  --color-light-grey: #DDDDDD;
  --color-off-white: #f5f5f5;
  --color-gold: #C6A85C;
  --color-gold-dim: rgba(198, 168, 92, 0.15);
  --color-white: #FFFFFF;
  --color-section-bg: #f8f8f8;
  --color-red-dim: rgba(255, 80, 80, 0.12);

  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;

  /* Spacing Scale (8px base) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Layout */
  --container-max: 1140px;
  --container-padding: 1.25rem;
  --nav-height: 72px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.6s ease;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-dark-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-dark-card-hover: 0 8px 32px rgba(0, 0, 0, 0.6);
}