/**
 * ChakraPlus Design System - CSS Tokens & Variables
 * Theme matched to Official ChakraPlus Logo:
 * Deep Metallic Charcoal (#141414), Automotive Gold (#E5B227), Brushed Chrome (#C8C9C7)
 * Visual Direction: Motion + Strength + Automotive Engineering
 */

:root {
  /* Brand Core Colors - Matched to Logo */
  --cp-primary: #141414;
  --cp-primary-dark: #0D0D0D;
  --cp-primary-light: #222222;
  --cp-primary-elevated: #2C2C2C;

  /* Rich Automotive Gold Palette */
  --cp-accent: #E5B227;
  --cp-accent-hover: #F6CB43;
  --cp-accent-active: #C49416;
  --cp-accent-subtle: rgba(229, 178, 39, 0.14);
  --cp-accent-glow: rgba(229, 178, 39, 0.32);
  --cp-gold-gradient: linear-gradient(135deg, #FAD961 0%, #E5B227 50%, #B8860B 100%);
  --cp-gold-gradient-hover: linear-gradient(135deg, #FFE17D 0%, #F6CB43 50%, #C99616 100%);

  /* Metallic Neutrals / Chrome */
  --cp-silver: #C8C9C7;
  --cp-silver-light: #EBECEB;
  --cp-silver-dark: #8A8D8F;
  --cp-silver-gradient: linear-gradient(135deg, #FFFFFF 0%, #D4D6D4 50%, #9FA19F 100%);

  /* Surfaces */
  --cp-surface: #FFFFFF;
  --cp-surface-alt: #F7F7F5;
  --cp-surface-muted: #EEEEEC;
  --cp-surface-dark: #141414;
  --cp-surface-dark-alt: #1A1A1A;
  --cp-surface-dark-card: #202020;

  /* Typography Colors */
  --cp-text: #1C1C1C;
  --cp-text-muted: #666666;
  --cp-text-subtle: #8A8A8A;
  --cp-text-light: #F7F7F5;
  --cp-text-light-muted: #A8A8A8;

  /* Borders */
  --cp-border: #E2E2E0;
  --cp-border-light: #EDEDEA;
  --cp-border-dark: #2F2F2F;
  --cp-border-accent: #E5B227;

  /* Semantic Feedback */
  --cp-success: #1D7A46;
  --cp-success-bg: #EAF6EF;
  --cp-warning: #E5B227;
  --cp-warning-bg: #FDF9EE;
  --cp-danger: #A62B2B;
  --cp-danger-bg: #FCEFEF;
  --cp-info: #1B5E9E;
  --cp-info-bg: #EEF5FB;

  /* Typography Font Families */
  --cp-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cp-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Radius System (Precision Engineered) */
  --cp-radius-none: 0px;
  --cp-radius-xs: 3px;
  --cp-radius-sm: 6px;
  --cp-radius-md: 10px;
  --cp-radius-lg: 14px;
  --cp-radius-pill: 9999px;

  /* Shadows (Precision-Grade with Gold Glow) */
  --cp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --cp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --cp-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.06);
  --cp-shadow-glow: 0 0 25px rgba(229, 178, 39, 0.35);
  --cp-shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.18), 0 0 22px rgba(229, 178, 39, 0.22);
  --cp-shadow-dark: 0 20px 48px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --cp-transition-micro: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --cp-transition-standard: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --cp-transition-deliberate: 360ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Constraints */
  --cp-container-max: 1360px;
  --cp-header-height: 78px;
  --cp-topbar-height: 38px;
}