/* ============================================================
   CourGrid Design Tokens
   Source of truth for all colors, typography, spacing, radius
   Import this file first in any screen or component stylesheet.
   ============================================================ */

:root {

  /* --------------------------------------------------
     Brand Colors
  -------------------------------------------------- */
  --cg-blue:        #1A8CFF;   /* Grid Blue     — primary actions, links, focus */
  --cg-blue-light:  #EBF4FF;   /* Blue tint     — hover backgrounds, selected states */
  --cg-blue-mid:    #B3D7FF;   /* Blue mid      — borders on blue surfaces */
  --cg-midnight:    #0D1117;   /* Midnight      — dark header, driver app bg */
  --cg-cloud:       #F0F6FF;   /* Cloud         — page background, subtle tints */

  --cg-green:       #00C48C;   /* Delivered     — success, delivered status */
  --cg-green-light: #E6FAF4;   /* Green tint    — success badge bg */
  --cg-green-dark:  #1A6B4A;   /* Green text    — success badge text */

  --cg-orange:      #FF6B35;   /* Alert         — urgent, fragile, warnings */
  --cg-orange-light:#FFF0EB;   /* Orange tint   — alert badge bg */
  --cg-orange-dark: #D4450A;   /* Orange text   — alert badge text */

  --cg-purple:      #7C5CFC;   /* Dispatch      — AI/RouteIQ features, dispatch */
  --cg-purple-light:#F0EBFF;   /* Purple tint   — dispatch badge bg */
  --cg-purple-dark: #5B38D6;   /* Purple text   — dispatch badge text */

  --cg-amber-light: #FFF3D4;   /* Amber tint    — pending badge bg */
  --cg-amber-dark:  #7A4F00;   /* Amber text    — pending badge text */

  --cg-red-light:   #FDECEA;   /* Red tint      — failed badge bg */
  --cg-red-dark:    #9B1C1C;   /* Red text      — failed badge text */

  /* --------------------------------------------------
     Neutral / UI Grays (light mode)
  -------------------------------------------------- */
  --cg-bg-page:     #F4F4F1;
  --cg-bg-primary:  #FFFFFF;
  --cg-bg-secondary:#F5F5F3;
  --cg-bg-tertiary: #EEEDE9;

  --cg-text-primary:   #1A1A18;
  --cg-text-secondary: #5A5A56;
  --cg-text-tertiary:  #9A9A94;

  --cg-border:         rgba(0, 0, 0, 0.09);
  --cg-border-md:      rgba(0, 0, 0, 0.15);
  --cg-border-strong:  rgba(0, 0, 0, 0.22);

  /* --------------------------------------------------
     Typography
  -------------------------------------------------- */
  --cg-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --cg-font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --cg-text-display:    28px;  /* Page titles, order IDs */
  --cg-text-heading:    20px;  /* Section headings */
  --cg-text-subheading: 15px;  /* Panel titles */
  --cg-text-body:       14px;  /* Default body text */
  --cg-text-small:      12px;  /* Captions, meta */
  --cg-text-xs:         11px;  /* Labels, badges */
  --cg-text-mono:       13px;  /* Tracking IDs, codes */

  --cg-weight-normal: 400;
  --cg-weight-medium: 500;

  /* --------------------------------------------------
     Spacing
  -------------------------------------------------- */
  --cg-space-1:   4px;
  --cg-space-2:   8px;
  --cg-space-3:  12px;
  --cg-space-4:  16px;
  --cg-space-5:  20px;
  --cg-space-6:  24px;
  --cg-space-8:  32px;
  --cg-space-10: 40px;

  /* --------------------------------------------------
     Border Radius
  -------------------------------------------------- */
  --cg-radius-sm:  6px;
  --cg-radius-md:  8px;
  --cg-radius-lg: 12px;
  --cg-radius-xl: 16px;
  --cg-radius-2xl:24px;
  --cg-radius-pill:999px;

  /* --------------------------------------------------
     Shadows
  -------------------------------------------------- */
  --cg-shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --cg-shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --cg-shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

  /* --------------------------------------------------
     Component-specific
  -------------------------------------------------- */
  --cg-topbar-height:  52px;
  --cg-sidebar-width: 300px;
  --cg-input-height:   36px;
}

/* --------------------------------------------------
   Dark Mode Overrides
-------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --cg-bg-page:      #111110;
    --cg-bg-primary:   #1C1C1A;
    --cg-bg-secondary: #252523;
    --cg-bg-tertiary:  #2E2E2B;

    --cg-text-primary:   #F0EFE8;
    --cg-text-secondary: #A8A89E;
    --cg-text-tertiary:  #6A6A62;

    --cg-border:        rgba(255,255,255,0.07);
    --cg-border-md:     rgba(255,255,255,0.13);
    --cg-border-strong: rgba(255,255,255,0.20);

    --cg-blue-light:  rgba(26,140,255,0.15);
    --cg-blue-mid:    rgba(26,140,255,0.30);
    --cg-green-light: rgba(0,196,140,0.12);
    --cg-orange-light:rgba(255,107,53,0.12);
    --cg-purple-light:rgba(124,92,252,0.15);
    --cg-amber-light: rgba(255,195,50,0.12);
    --cg-red-light:   rgba(235,70,70,0.12);
  }
}