/* Stock Pulse design tokens (dark, product default).
   Source: brandbook/stockpulse_brandbook.html (TOKENS DARK) + the 8 hi-fi prototypes.
   Where the two differ the PROTOTYPE wins (shareholder rule): secondary buttons sit on
   --bg-raised #222529, the in-app logo tile is #14313B, side panels are #16181C.
   Every colour used by ui/* and screens/* must come from here; no hex literals in components. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-app:        #0E1013;   /* brandbook --bg-canvas */
  --bg-sidebar:    #0B0D10;
  --bg-card:       #1A1D21;   /* brandbook --bg-base */
  --bg-input:      #1E2024;
  --bg-row-hover:  #1E2024;
  --bg-raised:     #222529;   /* brandbook --bg-surface: secondary buttons, menus, chips */
  --bg-hover:      #2A2D32;   /* brandbook --bg-elevated: hover of raised, toast */
  --bg-pressed:    #32363B;   /* overlay 3, toggle track off, empty progress */
  --bg-panel:      #16181C;   /* side panels, disabled pager button */
  --bg-unsaved:    #1E2226;
  --bg-overlay:    rgba(0,0,0,0.64);  /* modal scrim */
  --bg-scrim:      rgba(0,0,0,0.5);   /* side panel scrim */

  /* Text */
  --text-primary:   #E8E8E8;
  --text-secondary: #9A9EA6;
  --text-tertiary:  #8F959E;
  --text-disabled:  #5C636D;
  --text-inverse:   #0E1013;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-soft:    rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-chip-hover: rgba(255,255,255,0.22);

  /* Pulse Cyan: the single action accent. Action, focus, selection. Never a status. */
  --accent:          #22C3E6;
  --accent-hover:    #4DD0EC;
  --accent-pressed:  #14A8CA;
  --accent-text:     #3CCBEA;
  --on-accent:       #0E1013;
  --accent-tint:     rgba(34,195,230,0.12);
  --accent-tint-10:  rgba(34,195,230,0.10);
  --accent-tint-08:  rgba(34,195,230,0.08);
  --accent-tint-06:  rgba(34,195,230,0.06);
  --accent-tint-18:  rgba(34,195,230,0.18);
  --accent-line:     rgba(34,195,230,0.4);
  --accent-line-45:  rgba(34,195,230,0.45);
  --accent-line-50:  rgba(34,195,230,0.5);
  --accent-line-35:  rgba(34,195,230,0.35);

  /* Stock status: colour = state of the goods. Tints = 12% over the real surface. */
  --st-safe:    #3DC48A;  --st-safe-tint:    rgba(61,196,138,0.12);
  --st-watch:   #E3C24F;  --st-watch-tint:   rgba(227,194,79,0.12);
  --st-order:   #F5933F;  --st-order-tint:   rgba(245,147,63,0.12);
  --st-out:     #FA857A;  --st-out-tint:     rgba(250,133,122,0.12);
  --st-transit: #B09CF7;  --st-transit-tint: rgba(176,156,247,0.12);
  --st-error:   #EB80D0;  --st-error-tint:   rgba(235,128,208,0.12);
  --st-neutral: #8F959E;  --st-neutral-tint: rgba(143,149,158,0.12);
  --st-draft:   #9A9EA6;  --st-draft-tint:   rgba(154,158,166,0.12);
  --danger:        #FA857A;
  --danger-hover:  #FB9C93;
  --danger-tint:   rgba(250,133,122,0.10);
  --danger-soft:   rgba(250,133,122,0.05);
  --danger-line:   rgba(250,133,122,0.30);
  --danger-glow:   rgba(250,133,122,0.18);

  /* Charts + progress */
  --chart-bar:      #4A4F57;
  --chart-forecast: #C9CCD1;
  --chart-grid:     rgba(255,255,255,0.05);
  --chart-axis:     rgba(255,255,255,0.12);
  --track:          #32363B;
  --event-dot-old:  #4A4F57;
  --scrollbar:      #32363B;
  --ph-stripe:      #25292E;   /* image placeholder stripes */

  /* Logo (in-app mark; prototype colours) */
  --logo-tile: #14313B;
  --logo-core: #22C3E6;
  --logo-wave: #22C3E6;

  /* Typography */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --fs-h1: 19px;       /* page title, 600, -0.015em */
  --fs-h2: 15px;       /* section title, 600, -0.01em */
  --fs-modal: 16px;    /* modal title */
  --fs-kpi: 24px;      /* KPI tiles, mono 600 */
  --fs-metric: 17px;   /* model card metrics, mono 600 */
  --fs-body: 13px;
  --fs-nav: 13.5px;
  --fs-meta: 12.5px;
  --fs-small: 12px;
  --fs-caption: 11.5px;
  --fs-micro: 11px;
  --fs-tiny: 10.5px;

  /* Spacing (brandbook scale) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --page-pad: 26px 32px 44px;

  /* Radii */
  --r-xs: 4px;     /* kbd, code chip */
  --r-sm: 6px;     /* small buttons, menu items */
  --r-md: 8px;     /* cards, inputs, buttons */
  --r-lg: 10px;    /* toast, unsaved bar, hover preview */
  --r-xl: 12px;    /* modals, alert container */
  --r-full: 9999px;

  /* Shadows */
  --shadow-dropdown: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-modal:    0 24px 64px rgba(0,0,0,0.6);
  --shadow-panel:    -24px 0 64px rgba(0,0,0,0.5);
  --shadow-bar:      0 16px 40px rgba(0,0,0,0.5);
  --ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);

  /* Motion */
  --dur: 140ms;
  --ease: ease;

  /* Layers (prototype values) */
  --z-sticky: 2;
  --z-toolbar: 5;
  --z-header-menu: 10;
  --z-user-menu: 20;
  --z-dropdown: 30;
  --z-picker: 40;
  --z-panel: 40;
  --z-modal: 50;
  --z-modal-top: 60;   /* modal opened on top of a side panel */
  --z-preview: 80;
  --z-toast: 90;

  /* Layout */
  --sidebar-w: 244px;
}