/* ============================================================
   STOCK · ERP Visual Identity — Design Tokens
   Used across the brand book and all applied screens.
   ============================================================ */

:root {
  /* ── Brand ───────────────────────────────────────────── */
  --stock-red:        #ED3237;   /* Primary brand red — from logo */
  --stock-red-700:    #C72027;   /* Hover/active */
  --stock-red-800:    #9C151A;   /* Pressed / on red-tint backgrounds */
  --stock-red-100:    #FDECEC;   /* Tinted backgrounds, selected rows */
  --stock-red-50:     #FEF6F6;   /* Subtle wash */

  /* ── Ink (primary surfaces, headings, primary CTAs) ──── */
  --ink-900:          #0F0F14;   /* Strongest — primary CTA, sidebar */
  --ink-800:          #15151B;   /* Headings */
  --ink-700:          #2E2E37;   /* Body strong */
  --ink-600:          #4A4D55;   /* Secondary text */
  --ink-500:          #6B6E76;   /* Tertiary */
  --ink-400:          #8B8F97;   /* Quaternary / icons */
  --ink-300:          #B4B7BD;   /* Muted */
  --ink-200:          #D8DADE;   /* Strong border */
  --ink-150:          #E5E5E8;   /* Default border / hairline */
  --ink-100:          #EFEEEA;   /* Subtle border on warm bg */
  --ink-50:           #F6F4F0;   /* Page background (warm off-white) */
  --ink-25:           #FAF8F4;   /* Subtle surface */

  /* ── Surface ─────────────────────────────────────────── */
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;

  /* ── State (kept distinct from brand red) ────────────── */
  --success:          #16A34A;
  --success-100:      #E6F6EC;
  --warning:          #F59E0B;
  --warning-100:      #FEF1D6;
  --danger:           #DC2626;   /* Slightly cooler than brand red */
  --danger-100:       #FDE7E7;
  --info:             #2563EB;
  --info-100:         #E0E9FE;

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (px) */
  --t-10:  10px;
  --t-11:  11px;
  --t-12:  12px;
  --t-13:  13px;
  --t-14:  14px;
  --t-16:  16px;
  --t-18:  18px;
  --t-22:  22px;
  --t-24:  24px;
  --t-28:  28px;
  --t-36:  36px;
  --t-48:  48px;
  --t-72:  72px;

  /* ── Spacing (4px base) ──────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-14:  56px;
  --s-20:  80px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-sm:  4px;
  --r-md:  6px;    /* buttons, inputs */
  --r-lg:  8px;    /* cards, modals */
  --r-xl:  12px;
  --r-full: 9999px;

  /* ── Shadows (ink-tinted, never black) ───────────────── */
  --shadow-xs:  0 1px 0 0 rgba(15,15,20,.04);
  --shadow-sm:  0 1px 2px 0 rgba(15,15,20,.06), 0 1px 1px 0 rgba(15,15,20,.04);
  --shadow-md:  0 4px 12px -2px rgba(15,15,20,.08), 0 2px 4px -1px rgba(15,15,20,.05);
  --shadow-lg:  0 12px 32px -8px rgba(15,15,20,.12), 0 4px 8px -2px rgba(15,15,20,.06);
  --shadow-pop: 0 24px 64px -16px rgba(15,15,20,.22);
  --shadow-red: 0 4px 12px -2px rgba(237,50,55,.25);

  /* Focus */
  --focus-ring:  0 0 0 3px rgba(237,50,55,.30);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--ink-50);
  font-feature-settings: 'cv11', 'ss03', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }

/* Mono utility */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; }
.tnum { font-variant-numeric: tabular-nums; }