/* =====================================================================
   Design tokens — Top Tobacco Parts Inventory
   Industrial theme: steel blue + safety orange
   ===================================================================== */

:root {
    /* ── Brand palette ─────────────────────────────────────────────── */
    --color-primary:        #1e3a52;   /* Deep steel blue */
    --color-primary-dark:   #162c3e;
    --color-primary-light:  #2a5278;
    --color-primary-hover:  #24496a;
    --color-accent:         #e07010;   /* Industrial / safety orange */
    --color-accent-dark:    #b85a0a;
    --color-accent-light:   #f08030;
    --color-accent-hover:   #c86410;

    /* ── Neutral scale ─────────────────────────────────────────────── */
    --color-bg:             #f2f4f7;
    --color-bg-surface:     #ffffff;
    --color-bg-subtle:      #e8ecf0;
    --color-bg-muted:       #d4dae0;
    --color-border:         #c8cfd6;
    --color-border-subtle:  #dde2e8;

    --color-text:           #1a2530;
    --color-text-secondary: #4a5e6e;
    --color-text-muted:     #7a8fa0;
    --color-text-inverse:   #ffffff;

    /* ── Status colors ─────────────────────────────────────────────── */
    --color-success:        #1a7a40;
    --color-success-bg:     #e6f7ed;
    --color-success-border: #a8d8b9;

    --color-warning:        #a05400;
    --color-warning-bg:     #fff5e6;
    --color-warning-border: #ffc77a;

    --color-danger:         #c0182a;
    --color-danger-bg:      #fdedef;
    --color-danger-border:  #f5b0b8;

    --color-info:           #0a5ea8;
    --color-info-bg:        #e6f1fb;
    --color-info-border:    #97c8f0;

    /* ── Inventory-specific ────────────────────────────────────────── */
    --color-low-stock:      var(--color-warning);
    --color-low-stock-bg:   var(--color-warning-bg);
    --color-out-of-stock:   var(--color-danger);
    --color-out-of-stock-bg:var(--color-danger-bg);
    --color-in-stock:       var(--color-success);
    --color-in-stock-bg:    var(--color-success-bg);

    /* ── Sidebar ───────────────────────────────────────────────────── */
    --sidebar-bg:           #162c3e;
    --sidebar-width:        240px;
    --sidebar-item-hover:   rgba(255,255,255,.07);
    --sidebar-item-active:  var(--color-accent);
    --sidebar-text:         #c8d8e4;
    --sidebar-text-active:  #ffffff;

    /* ── Typography ────────────────────────────────────────────────── */
    --font-sans:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Courier, monospace;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl:1.75rem;

    /* ── Spacing ───────────────────────────────────────────────────── */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10:2.5rem;
    --space-12:3rem;

    /* ── Borders / shadows ─────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-pill:999px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:  0 12px 32px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.06);
    --shadow-xl:  0 24px 48px rgba(0,0,0,.18);

    /* ── Transitions ───────────────────────────────────────────────── */
    --transition-fast:    100ms ease;
    --transition-base:    180ms ease;
    --transition-slow:    320ms ease;

    /* ── Layout ────────────────────────────────────────────────────── */
    --header-height:  56px;
    --bottom-nav-h:   60px;
    --content-max-w:  1400px;

    /* ── Z-index layers ────────────────────────────────────────────── */
    --z-base:    0;
    --z-raised:  10;
    --z-dropdown:100;
    --z-sticky:  200;
    --z-modal:   400;
    --z-toast:   600;
    --z-overlay: 500;
}

/* ── Dark mode (system preference) ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:             #0d1b26;
        --color-bg-surface:     #142233;
        --color-bg-subtle:      #1a2e42;
        --color-bg-muted:       #213a52;
        --color-border:         #2c4460;
        --color-border-subtle:  #243852;

        --color-text:           #e2eaf0;
        --color-text-secondary: #8aaabf;
        --color-text-muted:     #4e6a80;

        --sidebar-bg:           #0d1b26;

        --color-success-bg:     rgba(26,122,64,.20);
        --color-warning-bg:     rgba(160,84,0,.20);
        --color-danger-bg:      rgba(192,24,42,.20);
        --color-info-bg:        rgba(10,94,168,.20);
    }
}