/* ═══════════════════════════════════════════════════════════
   SteelCtrl Design System — variables.css
   MODULE 1 · LAYOUT · File 1 of 3
   ───────────────────────────────────────────────────────────
   Covers:
     · Dark theme (default)
     · Light theme ([data-theme="light"])
     · Typography scale
     · Spacing scale
     · Border radius scale
     · Shadow scale
     · Motion / easing tokens
     · Z-index scale
     · Breakpoint custom properties
     · All 30 original tokens preserved + 40 new ones added
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── DARK THEME (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {

  /* ── SURFACE LAYERS ──────────────────────────────────────── */
  /* Depth system: void → base → raised → float → panel → overlay */
  --sc-void:    #070b14;   /* page background, deepest layer       */
  --sc-base:    #0d1220;   /* sidebar, topbar background           */
  --sc-raised:  #121929;   /* cards, panels, table rows            */
  --sc-float:   #1a2540;   /* inputs, dropdowns, hover states      */
  --sc-panel:   #1f2d4a;   /* modals, overlays                     */
  --sc-overlay: #243355;   /* tooltip backgrounds                  */

  /* Keep original variable names for backward compatibility */
  --void:   var(--sc-void);
  --base:   var(--sc-base);
  --raised: var(--sc-raised);
  --float:  var(--sc-float);
  --panel:  var(--sc-panel);

  /* ── BORDER COLOURS ─────────────────────────────────────── */
  --sc-line:    rgba(255, 255, 255, 0.06);
  --sc-line-2:  rgba(255, 255, 255, 0.10);
  --sc-line-3:  rgba(255, 255, 255, 0.18);
  --sc-line-4:  rgba(255, 255, 255, 0.28);

  /* Backward compat */
  --line:  var(--sc-line);
  --line2: var(--sc-line-2);
  --line3: var(--sc-line-3);

  /* ── TEXT ────────────────────────────────────────────────── */
  --sc-text-1:  #e8edf5;   /* primary text — headings, values      */
  --sc-text-2:  #94a3b8;   /* secondary text — labels, captions    */
  --sc-text-3:  #4b5e78;   /* tertiary text — placeholders, hints  */
  --sc-text-inv:#000000;   /* text on gold/coloured backgrounds    */

  /* Backward compat */
  --txt:  var(--sc-text-1);
  --txt2: var(--sc-text-2);
  --txt3: var(--sc-text-3);

  /* ── BRAND COLOURS ──────────────────────────────────────── */
  --sc-gold:         #f59e0b;
  --sc-gold-light:   #fbbf24;
  --sc-gold-dim:     rgba(245, 158, 11, 0.12);
  --sc-gold-glow:    rgba(245, 158, 11, 0.25);
  --sc-gold-border:  rgba(245, 158, 11, 0.30);

  /* Backward compat */
  --gold:      var(--sc-gold);
  --gold2:     var(--sc-gold-light);
  --gold-dim:  var(--sc-gold-dim);
  --gold-glow: var(--sc-gold-glow);
  --amber:     var(--sc-gold);
  --amber-dim: var(--sc-gold-dim);

  /* ── STATUS COLOURS ─────────────────────────────────────── */
  --sc-mint:        #10b981;   /* success, active, within-threshold */
  --sc-mint-dim:    rgba(16,  185, 129, 0.12);
  --sc-mint-border: rgba(16,  185, 129, 0.30);

  --sc-sky:         #3b82f6;   /* info, approved, post-tender       */
  --sc-sky-dim:     rgba(59,  130, 246, 0.12);
  --sc-sky-border:  rgba(59,  130, 246, 0.30);

  --sc-rose:        #ef4444;   /* error, locked, critical           */
  --sc-rose-dim:    rgba(239,  68,  68, 0.12);
  --sc-rose-border: rgba(239,  68,  68, 0.30);

  --sc-violet:      #8b5cf6;   /* pre-tender, drawing, AI           */
  --sc-violet-dim:  rgba(139,  92, 246, 0.12);
  --sc-violet-border:rgba(139, 92, 246, 0.30);

  --sc-cyan:        #06b6d4;   /* airport type, analytics           */
  --sc-cyan-dim:    rgba(6,   182, 212, 0.12);
  --sc-cyan-border: rgba(6,   182, 212, 0.30);

  --sc-orange:      #fb923c;   /* factory type                      */
  --sc-orange-dim:  rgba(251, 146,  60, 0.12);

  /* Backward compat */
  --mint:         var(--sc-mint);
  --mint-dim:     var(--sc-mint-dim);
  --sky:          var(--sc-sky);
  --sky-dim:      var(--sc-sky-dim);
  --rose:         var(--sc-rose);
  --rose-dim:     var(--sc-rose-dim);
  --violet:       var(--sc-violet);
  --violet-dim:   var(--sc-violet-dim);
  --cyan:         var(--sc-cyan);
  --cyan-dim:     var(--sc-cyan-dim);

  /* ── SHADOW SCALE ───────────────────────────────────────── */
  /* Dark theme: subtle glow-style shadows */
  --sc-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --sc-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --sc-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --sc-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  --sc-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.7);

  /* Gold glow — used on focused inputs, active cards */
  --sc-shadow-gold: 0 0 0 2px var(--sc-gold-dim);

  /* ── SCROLLBAR ──────────────────────────────────────────── */
  --sc-scrollbar-track:  transparent;
  --sc-scrollbar-thumb:  rgba(255, 255, 255, 0.10);
  --sc-scrollbar-hover:  rgba(255, 255, 255, 0.20);
}


/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {

  /* Surface layers — crisp white stack */
  --sc-void:    #f1f5f9;
  --sc-base:    #ffffff;
  --sc-raised:  #f8fafc;
  --sc-float:   #f1f5f9;
  --sc-panel:   #ffffff;
  --sc-overlay: #e2e8f0;

  --void:   var(--sc-void);
  --base:   var(--sc-base);
  --raised: var(--sc-raised);
  --float:  var(--sc-float);
  --panel:  var(--sc-panel);

  /* Borders */
  --sc-line:   rgba(15, 23, 42, 0.08);
  --sc-line-2: rgba(15, 23, 42, 0.14);
  --sc-line-3: rgba(15, 23, 42, 0.22);
  --sc-line-4: rgba(15, 23, 42, 0.32);

  --line:  var(--sc-line);
  --line2: var(--sc-line-2);
  --line3: var(--sc-line-3);

  /* Text — dark on light */
  --sc-text-1:  #0f172a;   /* near-black headings                  */
  --sc-text-2:  #475569;   /* medium grey labels                   */
  --sc-text-3:  #94a3b8;   /* light grey placeholders              */
  --sc-text-inv:#ffffff;   /* text on gold buttons                 */

  --txt:  var(--sc-text-1);
  --txt2: var(--sc-text-2);
  --txt3: var(--sc-text-3);

  /* Brand — same gold, slightly darker for contrast */
  --sc-gold:        #d97706;
  --sc-gold-light:  #f59e0b;
  --sc-gold-dim:    rgba(217, 119,   6, 0.10);
  --sc-gold-glow:   rgba(217, 119,   6, 0.20);
  --sc-gold-border: rgba(217, 119,   6, 0.35);

  --gold:     var(--sc-gold);
  --gold2:    var(--sc-gold-light);
  --gold-dim: var(--sc-gold-dim);
  --amber:    var(--sc-gold);
  --amber-dim:var(--sc-gold-dim);

  /* Status — same hues, adjusted dims for light bg */
  --sc-mint-dim:    rgba(16,  185, 129, 0.10);
  --sc-sky-dim:     rgba(59,  130, 246, 0.10);
  --sc-rose-dim:    rgba(239,  68,  68, 0.10);
  --sc-violet-dim:  rgba(139,  92, 246, 0.10);
  --sc-cyan-dim:    rgba(6,   182, 212, 0.10);

  --mint-dim:   var(--sc-mint-dim);
  --sky-dim:    var(--sc-sky-dim);
  --rose-dim:   var(--sc-rose-dim);
  --violet-dim: var(--sc-violet-dim);
  --cyan-dim:   var(--sc-cyan-dim);

  /* Shadows — soft drop shadows on light bg */
  --sc-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --sc-shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.08);
  --sc-shadow-md:  0 4px 16px rgba(15, 23, 42, 0.10);
  --sc-shadow-lg:  0 8px 32px rgba(15, 23, 42, 0.12);
  --sc-shadow-xl:  0 16px 48px rgba(15, 23, 42, 0.14);
  --sc-shadow-gold: 0 0 0 2px var(--sc-gold-dim);

  --sc-scrollbar-track: transparent;
  --sc-scrollbar-thumb: rgba(15, 23, 42, 0.15);
  --sc-scrollbar-hover: rgba(15, 23, 42, 0.25);
}


/* ── SYSTEM PREFERENCE FALLBACK ─────────────────────────────── */
/* Applied only when no [data-theme] attribute is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Surface */
    --sc-void:    #f1f5f9;
    --sc-base:    #ffffff;
    --sc-raised:  #f8fafc;
    --sc-float:   #f1f5f9;
    --sc-panel:   #ffffff;
    --sc-overlay: #e2e8f0;
    --void:   var(--sc-void);
    --base:   var(--sc-base);
    --raised: var(--sc-raised);
    --float:  var(--sc-float);
    --panel:  var(--sc-panel);
    /* Borders */
    --sc-line:   rgba(15,23,42,0.08);
    --sc-line-2: rgba(15,23,42,0.14);
    --sc-line-3: rgba(15,23,42,0.22);
    --line:  var(--sc-line);
    --line2: var(--sc-line-2);
    --line3: var(--sc-line-3);
    /* Text */
    --sc-text-1: #0f172a;
    --sc-text-2: #475569;
    --sc-text-3: #94a3b8;
    --txt: var(--sc-text-1);
    --txt2:var(--sc-text-2);
    --txt3:var(--sc-text-3);
    /* Brand */
    --sc-gold: #d97706;
    --gold:    var(--sc-gold);
    --sc-gold-dim: rgba(217,119,6,0.10);
    --gold-dim:var(--sc-gold-dim);
    /* Shadows */
    --sc-shadow-sm: 0 2px 8px rgba(15,23,42,0.08);
    --sc-shadow-md: 0 4px 16px rgba(15,23,42,0.10);
    --sc-scrollbar-thumb: rgba(15,23,42,0.15);
  }
}


/* ── TYPOGRAPHY SYSTEM ──────────────────────────────────────── */
:root {
  /* Font families */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Cascadia Code', monospace;
  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;

  /* Backward compat */
  --sans:    var(--font-sans);
  --mono:    var(--font-mono);
  --display: var(--font-display);

  /* Type scale — T-shirt sizes (rem relative to 13px base) */
  --text-xs:   10px;   /* badges, timestamps, sub-labels           */
  --text-sm:   11px;   /* secondary labels, table headers          */
  --text-base: 13px;   /* body text, form inputs, nav items        */
  --text-md:   15px;   /* card titles, modal titles small          */
  --text-lg:   18px;   /* page titles                              */
  --text-xl:   24px;   /* metric values, large numbers             */
  --text-2xl:  32px;   /* hero section headings                    */
  --text-3xl:  42px;   /* landing page H1                          */
  --text-4xl:  56px;   /* landing page H1 large                    */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  /* Letter spacing */
  --tracking-tight:  -0.3px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-wider:   1.0px;
  --tracking-widest:  2.0px;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
}


/* ── SPACING SYSTEM ─────────────────────────────────────────── */
:root {
  /* 4px base grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Semantic spacing */
  --gap-xs:   var(--space-1);    /* 4px  — tight icon+text gaps      */
  --gap-sm:   var(--space-2);    /* 8px  — button internal gaps      */
  --gap-md:   var(--space-3);    /* 12px — card padding sm           */
  --gap-lg:   var(--space-4);    /* 16px — card padding, section gap */
  --gap-xl:   var(--space-6);    /* 24px — page padding              */
  --gap-2xl:  var(--space-8);    /* 32px — section gaps              */

  /* Component-specific */
  --sidebar-width:        220px;
  --sidebar-collapsed:     52px;
  --topbar-height:         50px;
  --panel-padding:         16px;
  --page-padding-x:        24px;
  --page-padding-y:        20px;
  --content-max-width:    1440px;
}


/* ── BORDER RADIUS SCALE ────────────────────────────────────── */
:root {
  --radius-sm:  3px;    /* badges, nav badges                       */
  --radius-md:  5px;    /* buttons, inputs                          */
  --radius-lg:  8px;    /* cards, panels, metric cards              */
  --radius-xl: 10px;    /* modals, large panels                     */
  --radius-2xl:12px;    /* large feature cards (landing)            */
  --radius-full:9999px; /* pills, avatars, progress bars            */
}


/* ── MOTION SYSTEM ──────────────────────────────────────────── */
:root {
  /* Duration */
  --duration-instant:  80ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  400ms;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shorthand transitions */
  --transition-fast:   all var(--duration-fast)   var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-slow:   all var(--duration-slow)   var(--ease-out);
}


/* ── Z-INDEX SCALE ──────────────────────────────────────────── */
:root {
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    1;
  --z-dropdown:  10;
  --z-sidebar:   20;
  --z-topbar:    30;
  --z-overlay:   40;
  --z-modal:     50;
  --z-toast:     60;
  --z-tooltip:   70;
}


/* ── BREAKPOINTS (as custom properties for JS use) ──────────── */
:root {
  /* These are REFERENCE VALUES — use @media in CSS, not var() */
  /* Accessible to JS via getComputedStyle */
  --bp-mobile:  640px;   /* ≤ 640px — mobile phones           */
  --bp-tablet:  1024px;  /* ≤ 1024px — tablets                */
  --bp-desktop: 1280px;  /* ≤ 1280px — small desktops         */
  --bp-wide:    1440px;  /* > 1440px — large displays          */
}


/* ── BASE HTML + BODY ───────────────────────────────────────── */
html,
body {
  height: 100%;
  background: var(--sc-void);
  color: var(--sc-text-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent page scroll when app is fullscreen */
  overflow-y: auto;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--sc-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--sc-scrollbar-thumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sc-scrollbar-hover);
}

/* ── SELECTION ──────────────────────────────────────────────── */
::selection {
  background: var(--sc-gold-dim);
  color: var(--sc-gold);
}

/* ── FOCUS VISIBLE ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sc-gold);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ── UTILITY CLASSES (light weight) ────────────────────────── */
/* Typography */
.font-sans    { font-family: var(--font-sans)    !important; }
.font-mono    { font-family: var(--font-mono)    !important; }
.font-display { font-family: var(--font-display) !important; }

/* Text colours */
.text-gold    { color: var(--sc-gold)   !important; }
.text-mint    { color: var(--sc-mint)   !important; }
.text-sky     { color: var(--sc-sky)    !important; }
.text-rose    { color: var(--sc-rose)   !important; }
.text-violet  { color: var(--sc-violet) !important; }
.text-cyan    { color: var(--sc-cyan)   !important; }
.text-dim     { color: var(--sc-text-2) !important; }
.text-dimmer  { color: var(--sc-text-3) !important; }
.text-inverse { color: var(--sc-text-inv)!important; }

/* Spacing utilities */
.mb-4  { margin-bottom: var(--space-4);  }
.mb-8  { margin-bottom: var(--space-2);  }
.mb-12 { margin-bottom: var(--space-3);  }
.mb-16 { margin-bottom: var(--space-4);  }
.mb-24 { margin-bottom: var(--space-6);  }

/* Display */
.flex        { display: flex;         }
.grid        { display: grid;         }
.hidden      { display: none;         }

/* Flex helpers */
.items-center   { align-items: center;       }
.justify-center { justify-content: center;   }
.justify-between{ justify-content: space-between; }
.flex-1         { flex: 1;                   }
.flex-wrap      { flex-wrap: wrap;           }
.gap-4          { gap: var(--space-1);       }
.gap-6          { gap: var(--gap-xs);        }
.gap-8          { gap: var(--space-2);       }
.gap-10         { gap: 10px;                 }
.gap-12         { gap: var(--space-3);       }

/* Width */
.w-full { width: 100%; }

/* Truncate */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thin divider line */
.divider {
  height: 1px;
  background: var(--sc-line);
  border: none;
  margin: var(--space-4) 0;
}
.divider-v {
  width: 1px;
  height: 18px;
  background: var(--sc-line);
  flex-shrink: 0;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;     gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 14px; }
.grid-master-lg { display: grid; grid-template-columns: 260px 1fr; gap: 14px; }

/* Metric card grid helpers */
.metric-grid { display: grid; gap: 10px; margin-bottom: var(--space-4); }
.mg-2 { grid-template-columns: 1fr 1fr;           }
.mg-3 { grid-template-columns: repeat(3, 1fr);    }
.mg-4 { grid-template-columns: repeat(4, 1fr);    }

/* Admin stat grid */
.admin-stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }

/* Progress bar */
.prog-bar {
  width: 100%;
  height: 4px;
  background: var(--sc-float);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
}
.pf-gold     { background: var(--sc-gold);   }
.pf-mint     { background: var(--sc-mint);   }
.pf-rose     { background: var(--sc-rose);   }
.pf-sky      { background: var(--sc-sky);    }
.pf-gradient { background: linear-gradient(90deg, var(--sc-gold), var(--sc-mint)); }