/**
 * CHEVRON DESIGN SYSTEM - CSS VARIABLES
 * Portable design tokens for use across all platforms (TypeScript, .NET, Python, etc.)
 */

:root {
  /* ──────────────────────────────────────────
     BRAND COLORS
     ────────────────────────────────────────── */
  
  /* Blues (Primary Brand Color) */
  --chevron-dark-blue: #0B2D71;
  --chevron-medium-blue: #0066B2;
  --chevron-light-blue: #009DD9;
  
  /* Teals */
  --chevron-dark-teal: #003653;
  --chevron-medium-teal: #00708C;  
  --chevron-light-teal: #00B2BD;
  
  /* Greens */
  --chevron-dark-green: #444B0D;
  --chevron-medium-green: #769231;
  --chevron-light-green: #B2CC34;
  
  /* Oranges */
  --chevron-dark-orange: #711B00;
  --chevron-medium-orange: #E5601F;
  --chevron-light-orange: #FAAB18;
  
  /* Reds */
  --chevron-dark-red: #58001C;
  --chevron-medium-red: #96002E;
  --chevron-light-red: #E21836;
  
  /* Purples */
  --chevron-dark-purple: #3A0D36;
  --chevron-medium-purple: #751269;
  --chevron-light-purple: #BA3093;
  
  /* Neutrals */
  --chevron-black: #000000;
  --chevron-white: #FFFFFF;
  --chevron-bg-gray: #EDEDED;
  --chevron-dark-gray: #6B6D6F;
  --chevron-medium-gray: #8C8F93;
  --chevron-light-gray: #DBDCDD;

  /* ──────────────────────────────────────────
     SPACING SYSTEM (8px Grid)
     ────────────────────────────────────────── */
  --space-0-5: 0.25rem;  /* 4px */
  --space-1: 0.5rem;     /* 8px */
  --space-1-5: 0.75rem;  /* 12px */
  --space-2: 1rem;       /* 16px */
  --space-3: 1.5rem;     /* 24px */
  --space-4: 2rem;       /* 32px */
  --space-5: 2.5rem;     /* 40px */
  --space-6: 3rem;       /* 48px */
  --space-8: 4rem;       /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */

  /* ──────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────── */
  --font-gotham-book: 'GothamBook', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-gotham-narrow: 'GothamNarrowBook', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
  /* Font Sizes - Major Thirds Scale */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.563rem;  /* 25px */
  
  /* Line Heights */
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* Letter Spacing */
  --letter-spacing-normal: 0.005em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-widest: 0.1em;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ──────────────────────────────────────────
     MATERIAL DESIGN TYPOGRAPHY TOKENS
     (Fallback for apps without Material Design)
     ────────────────────────────────────────── */
  --mat-sys-label-large: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-normal) var(--font-gotham-book);
  --mat-sys-label-small: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-normal) var(--font-gotham-book);
  --mat-sys-body-small: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-relaxed) var(--font-gotham-book);
}