/**
 * Driverguards - Official Color Variables & Design Tokens
 * Source: Figma Collection Primitives
 */

:root {
  /* ==========================================================================
     1. BRAND COLORS (Red / Crimson Scale)
     ========================================================================== */
  --dg-color-brand-900: #B31215;
  --dg-color-brand-800: #C22021;
  --dg-color-brand-700: #CF2828;
  --dg-color-brand-600: #E1322E;
  --dg-color-brand-500: #EF3D2E;
  --dg-color-brand-400: #EB4E4A;
  --dg-color-brand-300: #E26F6E;
  --dg-color-brand-200: #ED9796;
  --dg-color-brand-100: #FECBD0;
  --dg-color-brand-50:  #FFEAED;

  /* Primary Brand Aliases */
  --dg-color-primary-dark: var(--dg-color-brand-900);
  --dg-color-primary:      var(--dg-color-brand-700);
  --dg-color-primary-main: var(--dg-color-brand-500);
  --dg-color-primary-tint: var(--dg-color-brand-50);

  /* ==========================================================================
     2. BLACK & NEUTRAL SCALE
     ========================================================================== */
  --dg-color-black-900: #000000;
  --dg-color-black-800: #262626;
  --dg-color-black-700: #434343;
  --dg-color-black-600: #555555;
  --dg-color-black-500: #7B7B7B;
  --dg-color-black-400: #9D9D9D;
  --dg-color-black-300: #C4C4C4;
  --dg-color-black-200: #D9D9D9;
  --dg-color-black-100: #E9E9E9;
  --dg-color-black-50:  #F5F5F5;
  --dg-color-white:     #FFFFFF;

  /* Semantic Neutral Aliases */
  --dg-color-text-main:    var(--dg-color-black-900);
  --dg-color-text-body:    var(--dg-color-black-800);
  --dg-color-text-muted:   var(--dg-color-black-600);
  --dg-color-text-light:   var(--dg-color-black-400);
  --dg-color-text-inverse: var(--dg-color-white);

  --dg-color-bg-page:   var(--dg-color-white);
  --dg-color-bg-subtle: var(--dg-color-black-50);
  --dg-color-bg-muted:  var(--dg-color-black-100);
  --dg-color-bg-card:   var(--dg-color-white);

  --dg-color-border-light: var(--dg-color-black-200);
  --dg-color-border-subtle: var(--dg-color-black-100);

  /* ==========================================================================
     3. YELLOW / GOLD ACCENT SCALE
     ========================================================================== */
  --dg-color-yellow-900: #B36012;
  --dg-color-yellow-800: #BE7417;
  --dg-color-yellow-700: #C5811D;
  --dg-color-yellow-600: #CB8E23;
  --dg-color-yellow-500: #CE9829;
  --dg-color-yellow-400: #D3A63C;
  --dg-color-yellow-300: #D9B55A;
  --dg-color-yellow-200: #E3CA87;
  --dg-color-yellow-100: #EDDEB6;
  --dg-color-yellow-50:  #F7F2E2;

  /* Accent Aliases */
  --dg-color-accent:       var(--dg-color-yellow-500);
  --dg-color-accent-hover: var(--dg-color-yellow-600);
  --dg-color-accent-dark:  var(--dg-color-yellow-800);
  --dg-color-accent-tint:  var(--dg-color-yellow-50);

  /* ==========================================================================
     4. ANNOTATION & FEEDBACK
     ========================================================================== */
  --dg-color-annotation-content:     #8A35F5;
  --dg-color-annotation-interaction: #0C8CE9;
  --dg-color-whatsapp:               #25D366;
  --dg-color-whatsapp-hover:         #20BA56;
  --dg-color-error:                  var(--dg-color-brand-600);
  --dg-color-success:                #10B981;

  /* ==========================================================================
     5. TYPOGRAPHY TOKENS
     ========================================================================== */
  --dg-font-display: 'Bebas Neue', sans-serif;
  --dg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Desktop Text Styles */
  --dg-text-desktop-title1-size: 96px;
  --dg-text-desktop-title2-size: 56px;
  --dg-text-desktop-title3-size: 48px;
  --dg-text-desktop-title4-size: 40px;
  --dg-text-desktop-h1-size: 24px;
  --dg-text-desktop-h2-size: 20px;
  --dg-text-desktop-sh1-size: 20px;
  --dg-text-desktop-sh2-size: 16px;
  --dg-text-desktop-b1-size: 20px;
  --dg-text-desktop-b2-size: 16px;
  --dg-text-desktop-b3-size: 14px;
  --dg-text-desktop-navlink-size: 20px;
  --dg-text-desktop-btn1-size: 24px;
  --dg-text-desktop-btn2-size: 20px;

  /* Mobile Text Styles */
  --dg-text-mobile-title1-size: 64px;
  --dg-text-mobile-title2-size: 48px;
  --dg-text-mobile-title3-size: 40px;
  --dg-text-mobile-h1-size: 24px;
  --dg-text-mobile-h2-size: 20px;
  --dg-text-mobile-sh1-size: 20px;
  --dg-text-mobile-sh2-size: 16px;
  --dg-text-mobile-b1-size: 16px;
  --dg-text-mobile-btn1-size: 24px;
  --dg-text-mobile-btn2-size: 20px;

  /* Spacing & Radius */
  --dg-space-2xs: 4px;
  --dg-space-xs: 8px;
  --dg-space-sm: 12px;
  --dg-space-md: 16px;
  --dg-space-lg: 24px;
  --dg-space-xl: 32px;
  --dg-space-2xl: 48px;
  --dg-space-3xl: 64px;

  --dg-radius-xs: 4px;
  --dg-radius-sm: 8px;
  --dg-radius-md: 12px;
  --dg-radius-lg: 16px;
  --dg-radius-full: 9999px;

  --dg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  --dg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);

  /* ==========================================================================
     6. LAYOUT GUIDE & GRID TOKENS (FIGMA STYLE: DESKTOP M80 & MOBILE M16)
     ========================================================================== */
  --dg-grid-desktop-columns: 12;
  --dg-grid-desktop-margin:  80px;
  --dg-grid-desktop-gutter:  36px;
  --dg-grid-desktop-max-width: 1440px;
  --dg-grid-desktop-content-width: 1280px; /* 1440px - (2 * 80px) */

  --dg-grid-mobile-columns: 4;
  --dg-grid-mobile-margin:  16px;
  --dg-grid-mobile-gutter:  16px;
  --dg-grid-mobile-max-width: 390px;
}