/* COB Design System — Tokens
   ============================================================
   Industrial warehouse-ops palette. Monochrome chrome,
   chromatic semantics. State and allocation carry meaning;
   everything else stays out of the way.
   ============================================================ */

:root {
  /* Type ------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "IBM Plex Sans", system-ui, sans-serif;

  /* Type scale ----------------------------------------------- */
  --t-3xs: 10px;
  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  13px;
  --t-md:  14px;
  --t-lg:  16px;
  --t-xl:  18px;
  --t-2xl: 22px;
  --t-3xl: 28px;
  --t-4xl: 36px;
  --t-5xl: 48px;
  --t-6xl: 64px;

  /* Tracking ------------------------------------------------- */
  --tr-tight: -0.02em;
  --tr-snug:  -0.01em;
  --tr-norm:   0;
  --tr-wide:   0.02em;
  --tr-loud:   0.08em;
  --tr-shout:  0.14em;

  /* Spacing (4px base) --------------------------------------- */
  --s-0:   0px;
  --s-px:  1px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;

  /* Radius --------------------------------------------------- */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   6px;
  --r-4:   8px;
  --r-5:   12px;
  --r-full: 999px;

  /* Density baselines (overridden by [data-density]) ---------- */
  --row-h: 36px;          /* table rows, list items */
  --ctl-h: 32px;          /* buttons, inputs */
  --ctl-h-lg: 40px;
  --pad-card: 20px;
  --pad-cell: 10px 12px;

  /* Chrome ---------------------------------------------------- */
  --band-h: 4px;
  --topbar-h: 56px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 56px;
  --footer-h: 28px;
}

/* Density ----------------------------------------------------- */
[data-density="compact"] {
  --row-h: 30px;
  --ctl-h: 28px;
  --ctl-h-lg: 36px;
  --pad-card: 14px;
  --pad-cell: 6px 10px;
}
[data-density="comfortable"] {
  --row-h: 44px;
  --ctl-h: 36px;
  --ctl-h-lg: 44px;
  --pad-card: 28px;
  --pad-cell: 14px 16px;
}

/* ============================================================
   LIGHT — warm-paper neutrals, ink text
   ============================================================ */
[data-theme="light"] {
  --bg:        #F4F3EE;
  --bg-2:      #ECEAE2;
  --surface:   #FFFFFF;
  --surface-2: #FAF8F2;
  --surface-3: #F1EFE7;
  --surface-sunken: #E8E5DB;

  --line:      rgba(20, 22, 28, 0.10);
  --line-2:    rgba(20, 22, 28, 0.06);
  --line-strong: rgba(20, 22, 28, 0.22);
  --line-dashed: rgba(20, 22, 28, 0.18);

  --ink:       #0E1116;
  --ink-2:     #2A2E37;
  --muted:     #5C616C;
  --muted-2:   #8A8E97;
  --faint:     #B6B8BD;
  --on-accent: #FFFFFF;

  /* Brand accent — graphite ink, used sparingly */
  --accent:        #161922;
  --accent-hover:  #000000;
  --accent-soft:   rgba(22, 25, 34, 0.06);

  /* States ---------------------------------------------------- */
  --state-idle:   #6B7280;         /* slate */
  --state-idle-bg:#E8E9EC;
  --state-active: #D97706;         /* amber 600 */
  --state-active-bg: #FEF3E0;
  --state-active-soft: rgba(217, 119, 6, 0.10);
  --state-manual: #BE3A8E;         /* magenta */
  --state-manual-bg: #FBE6F2;
  --state-manual-soft: rgba(190, 58, 142, 0.10);
  --danger:        #C0322E;
  --danger-bg:     #FCE7E5;
  --danger-soft:   rgba(192, 50, 46, 0.10);
  --success:       #117A47;
  --success-bg:    #D8EFE0;
  --warning:       #B58A00;
  --warning-bg:    rgba(245, 158, 11, 0.15);

  /* Allocation tags ------------------------------------------ */
  --alloc:        #1E5BC6;         /* blue */
  --alloc-bg:     #E0EAFB;
  --alloc-soft:   rgba(30, 91, 198, 0.10);
  --alloc-2:      #4378D1;
  --alloc-2-bg:   #EAF1FC;
  --alloc-3:      #6B92DA;
  --alloc-3-bg:   #F1F5FD;
  --bilan:        #0A7A56;         /* deep emerald */
  --bilan-bg:     #DCEFE5;
  --bilan-2:      #3C9075;
  --bilan-2-bg:   #E7F2EC;

  /* Map slot colors */
  --slot-empty:   #ECE9DF;
  --slot-empty-line: rgba(20, 22, 28, 0.10);
  --slot-occupied: #D9D5C5;
  --slot-locked:  rgba(20, 22, 28, 0.55);

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(20,22,28,0.04), 0 1px 2px rgba(20,22,28,0.05);
  --shadow:    0 4px 14px rgba(20,22,28,0.06), 0 1px 0 rgba(20,22,28,0.04);
  --shadow-lg: 0 20px 50px -10px rgba(20,22,28,0.18), 0 6px 18px rgba(20,22,28,0.08);
  --shadow-inset: inset 0 0 0 1px var(--line);
}

/* ============================================================
   DARK — cool graphite, no pure black
   ============================================================ */
[data-theme="dark"] {
  --bg:        #0B0D11;
  --bg-2:      #14171D;
  --surface:   #14171D;
  --surface-2: #1A1E26;
  --surface-3: #232833;
  --surface-sunken: #0A0C10;

  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.04);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-dashed: rgba(255, 255, 255, 0.16);

  --ink:       #ECEEF2;
  --ink-2:     #C9CDD6;
  --muted:     #8B919C;
  --muted-2:   #5C616C;
  --faint:     #3E434D;
  --on-accent: #0B0D11;

  --accent:        #ECEEF2;
  --accent-hover:  #FFFFFF;
  --accent-soft:   rgba(236, 238, 242, 0.08);

  --state-idle:   #8B919C;
  --state-idle-bg:#1F232B;
  --state-active: #F2A93B;
  --state-active-bg: #2B1F0E;
  --state-active-soft: rgba(242, 169, 59, 0.16);
  --state-manual: #E364B5;
  --state-manual-bg: #2A1322;
  --state-manual-soft: rgba(227, 100, 181, 0.16);
  --danger:        #EF5350;
  --danger-bg:     #2B1310;
  --danger-soft:   rgba(239, 83, 80, 0.16);
  --success:       #3DBE7A;
  --success-bg:    #0E2419;
  --warning:       #D9B33C;
  --warning-bg:    rgba(245, 158, 11, 0.15);

  --alloc:        #6FA1FF;
  --alloc-bg:     #16203A;
  --alloc-soft:   rgba(111, 161, 255, 0.16);
  --alloc-2:      #87B3FF;
  --alloc-2-bg:   #131C32;
  --alloc-3:      #A5C5FF;
  --alloc-3-bg:   #11182B;
  --bilan:        #4EC79B;
  --bilan-bg:     #0F2820;
  --bilan-2:      #74D1AF;
  --bilan-2-bg:   #112520;

  --slot-empty:   #181B22;
  --slot-empty-line: rgba(255, 255, 255, 0.08);
  --slot-occupied: #2A2F3A;
  --slot-locked:  rgba(255, 255, 255, 0.6);

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 4px 14px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 50px -10px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.4);
  --shadow-inset: inset 0 0 0 1px var(--line);
}

/* Default to light */
:root:not([data-theme]) { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.45;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "tnum";
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }