/* =====================================================================
   SACS Freight OS — Design Tokens
   Version: 1.0
   Purpose: Single source of truth for all design values
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     BACKGROUNDS (Layered Depth System)
     Use elevation levels to create visual hierarchy without heavy shadows
     ------------------------------------------------------------------ */
  --bg-base:        #080e1a;   /* Deepest layer — page background */
  --bg-elevated:    #0d1526;   /* Sidebar, topnav, panels */
  --bg-card:        #111e33;   /* Cards, content containers */
  --bg-hover:       #16243e;   /* Hover states, active selections */
  --bg-active:      #1b2c4a;   /* Active/pressed states */

  /* Legacy aliases (maintain backward compatibility) */
  --bg:       var(--bg-base);
  --bg2:      var(--bg-elevated);
  --bg3:      var(--bg-card);
  --bg4:      var(--bg-hover);
  --bg5:      var(--bg-active);

  /* ------------------------------------------------------------------
     BORDERS
     ------------------------------------------------------------------ */
  --border-subtle:  #1e2f4a;   /* Default dividers, card borders */
  --border-medium:  #263d5e;   /* Hover borders, focus rings */
  --border-strong:  #3a5a80;   /* Active borders, emphasis */

  /* Legacy aliases */
  --border:   var(--border-subtle);
  --border2:  var(--border-medium);

  /* ------------------------------------------------------------------
     TEXT COLORS
     ------------------------------------------------------------------ */
  --text-primary:   #e2e8f0;   /* Headings, primary content */
  --text-secondary: #94a3b8;   /* Labels, descriptions */
  --text-tertiary:  #6490b6;   /* Placeholders, disabled, hints — WCAG AA on all bg layers */
  --text-inverse:   #080e1a;   /* Text on accent backgrounds */

  /* Legacy aliases */
  --text:     var(--text-primary);
  --text2:    var(--text-secondary);
  --text3:    var(--text-tertiary);

  /* ------------------------------------------------------------------
     ACCENT COLORS (Semantic)
     ------------------------------------------------------------------ */
  --accent-blue:        #4f8ef7;   /* Primary actions, forwarding */
  --accent-blue-dark:   #3b7ef0;   /* Primary buttons, emphasis */
  --accent-teal:        #14c8b0;   /* Customs clearance, success alt */
  --accent-purple:      #9d7cf4;   /* Overview, analytics */
  --accent-orange:      #f97316;   /* Air freight, warnings */
  --accent-green:       #10d488;   /* Done, paid, verified, healthy */
  --accent-green-dark:  #0ebf79;   /* Success buttons */
  --accent-amber:       #f59e0b;   /* Pending, attention, sync */
  --accent-red:         #f05252;   /* Error, alert, dispute, critical */

  /* Legacy aliases */
  --blue:     var(--accent-blue);
  --blue2:    var(--accent-blue-dark);
  --purple:   var(--accent-purple);
  --orange:   var(--accent-orange);
  --green:    var(--accent-green);
  --green2:   var(--accent-green-dark);
  --amber:    var(--accent-amber);
  --red:      var(--accent-red);
  --teal:     var(--accent-teal);

  /* ------------------------------------------------------------------
     ACCENT BACKGROUNDS (Subtle tinted backgrounds)
     ------------------------------------------------------------------ */
  --bg-blue:    #0a1e3d;
  --bg-teal:    #031a17;
  --bg-purple:  #150f30;
  --bg-orange:  #1c0e00;
  --bg-green:   #031a10;
  --bg-amber:   #1c1200;
  --bg-red:     #1c0404;

  /* Legacy aliases */
  --blue-bg:    var(--bg-blue);
  --purple-bg:  var(--bg-purple);
  --orange-bg:  var(--bg-orange);
  --green-bg:   var(--bg-green);
  --amber-bg:   var(--bg-amber);
  --red-bg:     var(--bg-red);
  --teal-bg:    var(--bg-teal);

  /* Glow shadows */
  --blue-glow:  #4f8ef720;
  --green-glow: #10d48820;
  --red-glow:   #f0525220;
  --amber-glow: #f59e0b20;

  /* ------------------------------------------------------------------
     SPACING SCALE (4px Grid)
     ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ------------------------------------------------------------------
     TYPOGRAPHY SCALE
     Font: Inter (loaded in HTML head)
     ------------------------------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --text-display:        32px;
  --text-display-weight: 800;
  --text-display-lh:     1.1;
  --text-display-ls:     -0.02em;

  --text-h1:        24px;
  --text-h1-weight: 800;
  --text-h1-lh:     1.2;
  --text-h1-ls:     0.01em;

  --text-h2:        19px;
  --text-h2-weight: 700;
  --text-h2-lh:     1.3;
  --text-h2-ls:     0;

  --text-h3:        15px;
  --text-h3-weight: 700;
  --text-h3-lh:     1.4;
  --text-h3-ls:     0.01em;

  --text-body:        14px;
  --text-body-weight: 400;
  --text-body-lh:     1.5;
  --text-body-ls:     0;

  --text-body-medium:        14px;
  --text-body-medium-weight: 600;
  --text-body-medium-lh:     1.5;
  --text-body-medium-ls:     0;

  --text-label:        12px;
  --text-label-weight: 700;
  --text-label-lh:     1.4;
  --text-label-ls:     0.05em;

  --text-caption:        11px;
  --text-caption-weight: 600;
  --text-caption-lh:     1.4;
  --text-caption-ls:     0.02em;

  --text-micro:        10px;
  --text-micro-weight: 700;
  --text-micro-lh:     1.3;
  --text-micro-ls:     0.08em;

  /* ------------------------------------------------------------------
     BORDER RADIUS SCALE
     ------------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 999px;

  /* ------------------------------------------------------------------
     SHADOW / ELEVATION SCALE
     ------------------------------------------------------------------ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);

  --shadow-glow-blue:  0 0 8px rgba(79,142,247,0.2);
  --shadow-glow-green: 0 0 8px rgba(16,212,136,0.2);
  --shadow-glow-red:   0 0 8px rgba(240,82,82,0.2);
  --shadow-glow-amber: 0 0 8px rgba(245,158,11,0.2);

  /* ------------------------------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------------------------------ */
  --z-dropdown: 100;
  --z-sticky:   150;
  --z-panel:    200;
  --z-modal:    300;
  --z-overlay:  400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ------------------------------------------------------------------
     ANIMATION TOKENS
     ------------------------------------------------------------------ */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  --ease-default:  ease;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}