/* ============================================================
   KMC Design System v3 — CSS Custom Properties
   Brand: KMC (Korea Motorcycle Co., Ltd.)
   Logo: Navy-to-Blue gradient lettermark
   Base: Light mode | Auto dark mode support
   Responsive: mobile 320+ / tablet 768+ / desktop 1024+ / wide 1440+
   v3.1: Pretendard Variable, zoom removed, @layer architecture
   v3.2: 16px base (1920×1080), --text-2xs 11px, --layout-max 1920px
   ============================================================ */

/* @layer order: later layers override earlier layers */
@layer tokens, legacy, components, pages, utilities;

/* Pretendard Variable loaded via <link> in HTML — no @import needed */

/* ============================================================
   LIGHT MODE (Default)
   ============================================================ */
:root {
  /* === Brand Palette (from logo gradient) ===
     Logo: top-left navy #1B3A5C → center #2563EB → bottom-right #3B8DD9 */
  --brand-950: #0F2744;
  --brand-900: #1B3A5C;
  --brand-800: #1E4D7B;
  --brand-700: #2055A0;
  --brand-600: #2563EB;
  --brand-500: #3B82F6;
  --brand-400: #60A5FA;
  --brand-300: #93C5FD;
  --brand-200: #BFDBFE;
  --brand-100: #DBEAFE;
  --brand-50:  #EFF6FF;

  /* Semantic brand aliases */
  --brand:        var(--brand-600);
  --brand-strong: var(--brand-800);
  --brand-light:  var(--brand-50);
  --brand-hover:  var(--brand-700);

  /* === Accent (Amber — subdued role: alerts, secondary emphasis) === */
  --accent-700: #B45309;
  --accent-600: #D97706;
  --accent-500: #F59E0B;
  --accent-400: #FBBF24;
  --accent-300: #FDE68A;
  --accent-200: #FEF3C7;
  --accent-100: #FFFBEB;
  --accent:       var(--accent-500);
  --accent-light: var(--accent-100);

  /* === Neutral (Slate) === */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* === Surfaces === */
  --bg:          #F4F6F9;
  --panel:       #FFFFFF;
  --panel-alpha: rgba(255, 255, 255, 0.92);
  --surface:     var(--slate-100);

  /* === Tonal Surface Hierarchy (Stitch "Architectural Ledger" heritage) ===
     Layered backgrounds replace borders for spatial separation.
     Darker = more nested/emphasized. */
  --surface-base:     #F4F6F9;   /* Page background (= --bg) */
  --surface-low:      #F0F3F7;   /* Sidebar, secondary panels */
  --surface-mid:      #E8EDF3;   /* Section containers */
  --surface-high:     #E2E8F0;   /* Table headers, toolbar bg */
  --surface-highest:  #D9E1EA;   /* Active/selected highlights */
  --surface-raised:   #FFFFFF;   /* Cards, floating panels (= --panel) */
  --surface-overlay:  rgba(255, 255, 255, 0.82); /* Slide-over glass */
  --surface-overlay-blur: 16px;

  /* === Text === */
  --ink:           var(--slate-900);
  --ink-secondary: var(--slate-600);
  --muted:         var(--slate-400);

  /* === Borders (sharper for dense UI) === */
  --line:       var(--slate-400);
  --line-light: var(--slate-200);

  /* === Status — 4-color system === */
  --status-ok:        #059669;
  --status-ok-bg:     #ECFDF5;
  --status-ok-border: #A7F3D0;
  --status-warn:        #D97706;
  --status-warn-bg:     #FFFBEB;
  --status-warn-border: #FDE68A;
  --status-danger:        #DC2626;
  --status-danger-bg:     #FEF2F2;
  --status-danger-border: #FECACA;
  --status-info:        #2563EB;
  --status-info-bg:     #EFF6FF;
  --status-info-border: #BFDBFE;

  /* === Feedback (flash messages) === */
  --notice:  var(--status-info-bg);
  --error:   var(--status-danger-bg);
  --success: var(--status-ok-bg);

  /* === Pipeline Stage Colors (8 stages) ===
     Quote → Order → Purchase → Receiving → Production → Inspection → Shipping → Complete
     Progression: blue → indigo → teal → amber → green */
  --pipe-quote-bg:      #DBEAFE;
  --pipe-quote-fg:      #2563EB;
  --pipe-quote-border:  #93C5FD;
  --pipe-order-bg:      #E0E7FF;
  --pipe-order-fg:      #4F46E5;
  --pipe-order-border:  #A5B4FC;
  --pipe-purchase-bg:   #EDE9FE;
  --pipe-purchase-fg:   #7C3AED;
  --pipe-purchase-border: #C4B5FD;
  --pipe-receive-bg:    #CCFBF1;
  --pipe-receive-fg:    #0D9488;
  --pipe-receive-border:#5EEAD4;
  --pipe-produce-bg:    #FEF3C7;
  --pipe-produce-fg:    #D97706;
  --pipe-produce-border:#FDE68A;
  --pipe-inspect-bg:    #FFEDD5;
  --pipe-inspect-fg:    #C2410C;
  --pipe-inspect-border:#FDBA74;
  --pipe-ship-bg:       #D1FAE5;
  --pipe-ship-fg:       #059669;
  --pipe-ship-border:   #6EE7B7;
  --pipe-complete-bg:   #ECFDF5;
  --pipe-complete-fg:   #047857;
  --pipe-complete-border:#A7F3D0;

  /* === AI Panel (light mode — matches Manus concept 06) === */
  --ai-bg:           #F4F6F9;
  --ai-panel:        #FFFFFF;
  --ai-text:         var(--slate-800);
  --ai-text-muted:   var(--slate-500);
  --ai-user-bg:      var(--brand-50);
  --ai-assistant-bg: #FFFFFF;
  --ai-system-bg:    var(--status-danger-bg);
  --ai-code:         var(--brand-600);
  --ai-border:       var(--slate-200);
  --ai-input-bg:     #FFFFFF;
  --ai-input-border: var(--slate-300);
  --ai-pending:      0.5;

  /* === Gradients === */
  --gradient-brand:  linear-gradient(135deg, #1B3A5C 0%, #2563EB 60%, #3B8DD9 100%);
  --gradient-header: linear-gradient(135deg, #1B3A5C 0%, #1E4D7B 40%, #2563EB 100%);
  --gradient-cta:    linear-gradient(135deg, #1E4D7B 0%, #2563EB 100%);
  --gradient-hero:   linear-gradient(135deg, #1B3A5C 0%, #2563EB 50%, #3B8DD9 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(59,141,217,0.06) 100%);

  /* === Spacing Scale (4px base) === */
  --sp-0:  0;
  --sp-px: 1px;
  --sp-0_5: 0.125rem;
  --sp-1:  0.25rem;
  --sp-1_5: 0.375rem;
  --sp-2:  0.5rem;
  --sp-2_5: 0.625rem;
  --sp-3:  0.75rem;
  --sp-3_5: 0.875rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-9:  2.25rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* === Typography === */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem;   /* 11px — badges, captions */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px — default body (1920×1080 optimized) */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px — dashboard hero numbers */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

  /* === Border Radius (modern rounded design) === */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 999px;

  /* === Shadows (softer, more layered) === */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Focus ring */
  --ring-brand: 0 0 0 3px rgba(37, 99, 235, 0.20);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.20);

  /* === Z-index Layers === */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-drawer:   400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* === Touch Target (more generous) === */
  --touch-min: 36px;

  /* === Layout === */
  --header-h:    56px;
  --sidebar-w:   200px;
  --drawer-w:    400px;
  --content-max: 1280px;
  --layout-max:  1920px;  /* 1920×1080 target — outer layout cap */

  /* === Component Tokens === */

  /* Header — raised surface */
  --header-bg:          var(--surface-raised);
  --header-text:        var(--slate-800);
  --header-search-bg:   var(--surface-mid);
  --header-search-text: var(--slate-500);
  --header-icon-color:  var(--slate-500);
  --header-icon-hover:  var(--slate-800);
  --header-ai-color:    var(--accent-500);
  --header-ai-hover:    var(--accent-400);
  --header-border:      var(--slate-200);
  --header-shadow:      0 1px 3px rgba(0, 0, 0, 0.05);

  /* Sidebar — tonal surface separation (no border needed) */
  --sidebar-bg:               var(--surface-low);
  --sidebar-border:           transparent;
  --sidebar-item-hover:       var(--surface-mid);
  --sidebar-item-active-bg:   var(--brand-50);
  --sidebar-item-active-text: var(--brand-600);
  --sidebar-item-active-bar:  var(--brand-600);
  --sidebar-logo-h:           56px;
  --sidebar-item-h:           40px;
  --sidebar-group-text:       var(--slate-400);

  /* Cards — raised surface, subtle shadow instead of border */
  --card-bg:        var(--surface-raised);
  --card-border:    transparent;
  --card-shadow:    var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Buttons */
  --btn-primary-bg:     var(--gradient-cta);
  --btn-primary-text:   #FFFFFF;
  --btn-primary-hover:  brightness(1.08);
  --btn-ghost-bg:       transparent;
  --btn-ghost-border:   var(--line);
  --btn-ghost-text:     var(--ink);
  --btn-ghost-hover-bg: var(--brand-50);
  --btn-danger-bg:      #DC2626;
  --btn-danger-text:    #FFFFFF;
  --btn-danger-hover:   #B91C1C;

  /* Inputs */
  --input-bg:          #FFFFFF;
  --input-border:      var(--slate-300);
  --input-text:        var(--ink);
  --input-placeholder: var(--muted);
  --input-focus-border: var(--brand-600);
  --input-focus-ring:   var(--ring-brand);
  --input-disabled-bg:  var(--slate-100);

  /* Tables — tonal header, ghost borders */
  --table-header-bg:   var(--surface-high);
  --table-header-text: var(--slate-700);
  --table-row-hover:   var(--surface-mid);
  --table-border:      rgba(148, 163, 184, 0.15);
  --table-stripe:      var(--surface-base);

  /* Badges */
  --badge-ok-bg:      var(--status-ok-bg);
  --badge-ok-text:    var(--status-ok);
  --badge-warn-bg:    var(--status-warn-bg);
  --badge-warn-text:  var(--status-warn);
  --badge-danger-bg:  var(--status-danger-bg);
  --badge-danger-text: var(--status-danger);
  --badge-info-bg:    var(--status-info-bg);
  --badge-info-text:  var(--status-info);

  /* Toasts */
  --toast-notice-bg:    var(--status-info-bg);
  --toast-notice-text:  var(--brand-800);
  --toast-error-bg:     var(--status-danger-bg);
  --toast-error-text:   var(--status-danger);
  --toast-success-bg:   var(--status-ok-bg);
  --toast-success-text: var(--status-ok);

  /* Modal */
  --modal-overlay: rgba(15, 23, 42, 0.60);
  --modal-blur:    4px;
  --modal-bg:      var(--panel);
  --modal-shadow:  var(--shadow-2xl);

  /* Monitoring dots */
  --dot-ok:     var(--status-ok);
  --dot-warn:   var(--status-warn);
  --dot-danger: var(--status-danger);

  /* Background decoration (subtle brand tint) */
  --bg-decoration: radial-gradient(
    ellipse at top right,
    rgba(37, 99, 235, 0.03),
    transparent 50%
  );

  /* Scrollbar */
  --scrollbar-track: var(--slate-100);
  --scrollbar-thumb: var(--slate-300);
  --scrollbar-thumb-hover: var(--slate-400);

  /* Transition defaults */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === AI Panel (Drawer style) === */
  --ai-drawer-bg:     #FFFFFF;
  --ai-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  --ai-tab-active:    var(--brand-600);
  --ai-tab-inactive:  var(--slate-400);

  /* === Kanban (Pipeline cards) === */
  --kanban-card-radius: 10px;
  --kanban-header-h:    44px;
  --kanban-gap:         12px;

  /* === Field Operations === */
  --field-scan-btn-h:      80px;
  --field-scan-btn-radius: 16px;
  --field-action-btn-size: 130px;

  /* === Badge Stage Colors (Pipeline stages) === */
  --stage-lead:      #3B82F6;
  --stage-consult:   #F59E0B;
  --stage-proposal:  #8B5CF6;
  --stage-negotiate: #EC4899;
  --stage-won:       #22C55E;
  --stage-lost:      #EF4444;
}

/* ============================================================
   DARK MODE — via system preference
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces */
    --bg:          #0B1120;
    --panel:       #1E293B;
    --panel-alpha: rgba(30, 41, 59, 0.95);
    --surface:     #334155;

    /* Tonal Surface Hierarchy (dark) */
    --surface-base:     #0B1120;
    --surface-low:      #0F1729;
    --surface-mid:      #151E32;
    --surface-high:     #1A2540;
    --surface-highest:  #213050;
    --surface-raised:   #1E293B;
    --surface-overlay:  rgba(30, 41, 59, 0.85);
    --surface-overlay-blur: 16px;

    /* Text */
    --ink:           #F1F5F9;
    --ink-secondary: #CBD5E1;
    --muted:         #64748B;

    /* Borders */
    --line:       #334155;
    --line-light: rgba(51, 65, 85, 0.6);

    /* Brand adjustments (brighter for dark bg) */
    --brand:        #3B82F6;
    --brand-strong: #2563EB;
    --brand-light:  rgba(59, 130, 246, 0.12);
    --brand-hover:  #60A5FA;

    /* Status backgrounds (dark variants) */
    --status-ok-bg:         rgba(5, 150, 105, 0.15);
    --status-ok-border:     rgba(5, 150, 105, 0.30);
    --status-ok:            #34D399;
    --status-warn-bg:       rgba(217, 119, 6, 0.15);
    --status-warn-border:   rgba(217, 119, 6, 0.30);
    --status-warn:          #FBBF24;
    --status-danger-bg:     rgba(220, 38, 38, 0.15);
    --status-danger-border: rgba(220, 38, 38, 0.30);
    --status-danger:        #F87171;
    --status-info-bg:       rgba(37, 99, 235, 0.15);
    --status-info-border:   rgba(37, 99, 235, 0.30);
    --status-info:          #60A5FA;

    /* Feedback */
    --notice:  var(--status-info-bg);
    --error:   var(--status-danger-bg);
    --success: var(--status-ok-bg);

    /* Pipeline (dark backgrounds) */
    --pipe-quote-bg:      rgba(37, 99, 235, 0.15);
    --pipe-quote-border:  rgba(37, 99, 235, 0.30);
    --pipe-order-bg:      rgba(79, 70, 229, 0.15);
    --pipe-order-border:  rgba(79, 70, 229, 0.30);
    --pipe-purchase-bg:   rgba(124, 58, 237, 0.15);
    --pipe-purchase-border: rgba(124, 58, 237, 0.30);
    --pipe-receive-bg:    rgba(13, 148, 136, 0.15);
    --pipe-receive-border:rgba(13, 148, 136, 0.30);
    --pipe-produce-bg:    rgba(217, 119, 6, 0.15);
    --pipe-produce-border:rgba(217, 119, 6, 0.30);
    --pipe-inspect-bg:    rgba(194, 65, 12, 0.15);
    --pipe-inspect-border:rgba(194, 65, 12, 0.30);
    --pipe-ship-bg:       rgba(5, 150, 105, 0.15);
    --pipe-ship-border:   rgba(5, 150, 105, 0.30);
    --pipe-complete-bg:   rgba(4, 120, 87, 0.15);
    --pipe-complete-border:rgba(4, 120, 87, 0.30);

    /* Shadows (stronger for dark surfaces) */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.30), 0 8px 10px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.40);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);

    /* Focus ring (brighter) */
    --ring-brand:  0 0 0 3px rgba(59, 130, 246, 0.35);
    --ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.35);

    /* Component: Header (dark — tonal surface) */
    --header-bg:     var(--surface-raised);
    --header-text:   var(--slate-100);
    --header-search-bg:   var(--surface-mid);
    --header-search-text: var(--slate-400);
    --header-icon-color:  var(--slate-400);
    --header-icon-hover:  var(--slate-100);
    --header-border:      transparent;
    --header-shadow:      0 1px 3px rgba(0, 0, 0, 0.20);

    /* Component: Sidebar (dark — tonal surface) */
    --sidebar-bg:           var(--surface-low);
    --sidebar-border:       transparent;
    --sidebar-item-hover:   var(--surface-mid);
    --sidebar-item-active-bg:   rgba(59, 130, 246, 0.15);
    --sidebar-item-active-text: #60A5FA;
    --sidebar-item-active-bar:  #3B82F6;
    --sidebar-group-text:       var(--slate-500);

    /* Component: Cards (dark — tonal surface) */
    --card-bg:     var(--surface-raised);
    --card-border: transparent;

    /* Component: Buttons */
    --btn-ghost-border:   var(--slate-600);
    --btn-ghost-text:     var(--slate-200);
    --btn-ghost-hover-bg: rgba(59, 130, 246, 0.10);

    /* Component: Inputs */
    --input-bg:           var(--surface-mid);
    --input-border:       var(--slate-600);
    --input-text:         var(--slate-100);
    --input-placeholder:  var(--slate-500);
    --input-focus-border: #3B82F6;
    --input-disabled-bg:  var(--surface-high);

    /* Component: Tables (dark — tonal surface) */
    --table-header-bg:   var(--surface-high);
    --table-header-text: var(--slate-200);
    --table-row-hover:   var(--surface-mid);
    --table-border:      rgba(148, 163, 184, 0.10);
    --table-stripe:      var(--surface-low);

    /* Component: Toasts */
    --toast-notice-bg:   rgba(37, 99, 235, 0.20);
    --toast-notice-text: #93C5FD;
    --toast-error-bg:    rgba(220, 38, 38, 0.20);
    --toast-error-text:  #FCA5A5;
    --toast-success-bg:  rgba(5, 150, 105, 0.20);
    --toast-success-text:#6EE7B7;

    /* Component: Modal */
    --modal-overlay: rgba(0, 0, 0, 0.70);

    /* Background decoration */
    --bg-decoration: radial-gradient(
      ellipse at top right,
      rgba(59, 130, 246, 0.04),
      transparent 50%
    );

    /* Scrollbar */
    --scrollbar-track: var(--slate-800);
    --scrollbar-thumb: var(--slate-600);
    --scrollbar-thumb-hover: var(--slate-500);

    /* Accent adjustments */
    --accent:       #FBBF24;
    --accent-light: rgba(251, 191, 36, 0.12);

    /* AI Panel (dark mode) */
    --ai-drawer-bg:     var(--slate-900);
    --ai-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.30);
    --ai-tab-active:    #60A5FA;
    --ai-tab-inactive:  var(--slate-500);
  }
}

/* ============================================================
   DARK MODE — via manual toggle [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  /* Surfaces */
  --bg:          #0B1120;
  --panel:       #1E293B;
  --panel-alpha: rgba(30, 41, 59, 0.95);
  --surface:     #334155;

  /* Tonal Surface Hierarchy (dark) */
  --surface-base:     #0B1120;
  --surface-low:      #0F1729;
  --surface-mid:      #151E32;
  --surface-high:     #1A2540;
  --surface-highest:  #213050;
  --surface-raised:   #1E293B;
  --surface-overlay:  rgba(30, 41, 59, 0.85);
  --surface-overlay-blur: 16px;

  /* Text */
  --ink:           #F1F5F9;
  --ink-secondary: #CBD5E1;
  --muted:         #64748B;

  /* Borders */
  --line:       #334155;
  --line-light: rgba(51, 65, 85, 0.6);

  /* Brand adjustments */
  --brand:        #3B82F6;
  --brand-strong: #2563EB;
  --brand-light:  rgba(59, 130, 246, 0.12);
  --brand-hover:  #60A5FA;

  /* Status backgrounds */
  --status-ok-bg:         rgba(5, 150, 105, 0.15);
  --status-ok-border:     rgba(5, 150, 105, 0.30);
  --status-ok:            #34D399;
  --status-warn-bg:       rgba(217, 119, 6, 0.15);
  --status-warn-border:   rgba(217, 119, 6, 0.30);
  --status-warn:          #FBBF24;
  --status-danger-bg:     rgba(220, 38, 38, 0.15);
  --status-danger-border: rgba(220, 38, 38, 0.30);
  --status-danger:        #F87171;
  --status-info-bg:       rgba(37, 99, 235, 0.15);
  --status-info-border:   rgba(37, 99, 235, 0.30);
  --status-info:          #60A5FA;

  /* Feedback */
  --notice:  var(--status-info-bg);
  --error:   var(--status-danger-bg);
  --success: var(--status-ok-bg);

  /* Pipeline (dark backgrounds) */
  --pipe-quote-bg:      rgba(37, 99, 235, 0.15);
  --pipe-quote-border:  rgba(37, 99, 235, 0.30);
  --pipe-order-bg:      rgba(79, 70, 229, 0.15);
  --pipe-order-border:  rgba(79, 70, 229, 0.30);
  --pipe-purchase-bg:   rgba(124, 58, 237, 0.15);
  --pipe-purchase-border: rgba(124, 58, 237, 0.30);
  --pipe-receive-bg:    rgba(13, 148, 136, 0.15);
  --pipe-receive-border:rgba(13, 148, 136, 0.30);
  --pipe-produce-bg:    rgba(217, 119, 6, 0.15);
  --pipe-produce-border:rgba(217, 119, 6, 0.30);
  --pipe-inspect-bg:    rgba(194, 65, 12, 0.15);
  --pipe-inspect-border:rgba(194, 65, 12, 0.30);
  --pipe-ship-bg:       rgba(5, 150, 105, 0.15);
  --pipe-ship-border:   rgba(5, 150, 105, 0.30);
  --pipe-complete-bg:   rgba(4, 120, 87, 0.15);
  --pipe-complete-border:rgba(4, 120, 87, 0.30);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.30), 0 8px 10px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.40);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Focus ring */
  --ring-brand:  0 0 0 3px rgba(59, 130, 246, 0.35);
  --ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.35);

  /* Header (dark — tonal surface) */
  --header-bg:     var(--surface-raised);
  --header-text:   var(--slate-100);
  --header-search-bg:   var(--surface-mid);
  --header-search-text: var(--slate-400);
  --header-icon-color:  var(--slate-400);
  --header-icon-hover:  var(--slate-100);
  --header-border:      transparent;
  --header-shadow:      0 1px 3px rgba(0, 0, 0, 0.20);

  /* Sidebar (dark — tonal surface) */
  --sidebar-bg:           var(--surface-low);
  --sidebar-border:       transparent;
  --sidebar-item-hover:   var(--surface-mid);
  --sidebar-item-active-bg:   rgba(59, 130, 246, 0.15);
  --sidebar-item-active-text: #60A5FA;
  --sidebar-item-active-bar:  #3B82F6;
  --sidebar-group-text:       var(--slate-500);

  /* Cards (dark — tonal surface) */
  --card-bg:     var(--surface-raised);
  --card-border: transparent;

  /* Buttons */
  --btn-ghost-border:   var(--slate-600);
  --btn-ghost-text:     var(--slate-200);
  --btn-ghost-hover-bg: rgba(59, 130, 246, 0.10);

  /* Inputs */
  --input-bg:           var(--surface-mid);
  --input-border:       var(--slate-600);
  --input-text:         var(--slate-100);
  --input-placeholder:  var(--slate-500);
  --input-focus-border: #3B82F6;
  --input-disabled-bg:  var(--surface-high);

  /* Tables (dark — tonal surface) */
  --table-header-bg:   var(--surface-high);
  --table-header-text: var(--slate-200);
  --table-row-hover:   var(--surface-mid);
  --table-border:      rgba(148, 163, 184, 0.10);
  --table-stripe:      var(--surface-low);

  /* Toasts */
  --toast-notice-bg:   rgba(37, 99, 235, 0.20);
  --toast-notice-text: #93C5FD;
  --toast-error-bg:    rgba(220, 38, 38, 0.20);
  --toast-error-text:  #FCA5A5;
  --toast-success-bg:  rgba(5, 150, 105, 0.20);
  --toast-success-text:#6EE7B7;

  /* Modal */
  --modal-overlay: rgba(0, 0, 0, 0.70);

  /* Background decoration */
  --bg-decoration: radial-gradient(
    ellipse at top right,
    rgba(59, 130, 246, 0.04),
    transparent 50%
  );

  /* Scrollbar */
  --scrollbar-track: var(--slate-800);
  --scrollbar-thumb: var(--slate-600);
  --scrollbar-thumb-hover: var(--slate-500);

  /* Accent */
  --accent:       #FBBF24;
  --accent-light: rgba(251, 191, 36, 0.12);

  /* AI Panel (dark mode) */
  --ai-drawer-bg:     var(--slate-900);
  --ai-drawer-shadow: -4px 0 24px rgba(0, 0, 0, 0.30);
  --ai-tab-active:    #60A5FA;
  --ai-tab-inactive:  var(--slate-500);
}

/* ============================================================
   BASE STYLES
   ============================================================ */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  html {
    font-size: 15px;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Selection */
::selection {
  background: rgba(37, 99, 235, 0.20);
  color: var(--ink);
}