/* ============================================================================
   StockWatch BC — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   This file is the ONE canonical place for brand colour, the neutral ramp,
   status/signal colours, radii, shadows, spacing, motion and the type scale.
   It is loaded FIRST on every page (before page CSS / inline <style>), so every
   surface resolves the same values.

   Migration note: the older stylesheets historically defined their own brand
   names (`--lenovo-red`, `--roku-purple`, `--brand-purple`) and ramps. Those
   names are kept as ALIASES below so nothing breaks, but they now resolve from
   the canonical `--brand-*` / `--slate-*` tokens here — change a value once and
   it propagates everywhere. New code should use the canonical names.
   ============================================================================ */
:root {
  /* ── Brand (indigo) ─────────────────────────────────────────────────────── */
  --brand-primary:        #4F46E5;
  --brand-primary-dk:     #4338CA;
  --brand-primary-md:     #6366F1;
  --brand-primary-lt:     #818CF8;
  --brand-primary-soft:   rgba(79, 70, 229, 0.08);
  --brand-primary-border: rgba(79, 70, 229, 0.24);

  /* The brand as a bare RGB triple, so CSS can compose ANY alpha:
       rgba(var(--brand-rgb), 0.12)
     Without this, every brand tint had to be a hardcoded rgba() literal — and
     hardcoded literals do not recolor. swApplyBranding() (dashboard-system.js)
     overrides --brand-rgb per tenant, so all tints follow the accent. */
  --brand-rgb: 79, 70, 229;

  /* Brand tint surfaces (deal cards, active tabs, icon chips). Hand-picked for
     the default indigo; swApplyBranding() recomputes them from the tenant hex. */
  --brand-tint:        #EEF0FF;
  --brand-tint-border: #C7CBFF;

  /* ── Neutral ramp (slate) ───────────────────────────────────────────────── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;   /* decorative / borders only — see --color-text-muted for text */
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── Semantic colour roles ──────────────────────────────────────────────── */
  --color-bg:          var(--slate-50);
  --color-surface:     #FFFFFF;
  --color-border:      var(--slate-200);
  --color-text:        var(--slate-900);
  --color-text-soft:   var(--slate-700);
  --color-text-muted:  var(--slate-500);   /* WCAG-AA on white (4.6:1) — never use slate-400 for text */

  /* ── Status / signal colours ────────────────────────────────────────────── */
  --signal-ok:   #16A34A;
  --signal-low:  #D97706;
  --signal-out:  #DC2626;
  --signal-info: #2563EB;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 100px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 6px 18px rgba(17, 17, 17, 0.07);
  --shadow-lg:    0 18px 42px rgba(17, 17, 17, 0.12);
  --shadow-brand: 0 4px 18px rgba(79, 70, 229, 0.18);

  /* ── Spacing scale (4px base) ───────────────────────────────────────────── */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 350ms;

  /* ── Type scale ─────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 0.95rem;
  --text-lg:   1.15rem;
  --text-xl:   1.45rem;
  --text-2xl:  1.9rem;

  /* Responsive breakpoints are documented here for reference (CSS custom
     properties can't be used inside @media): sm 640px · md 900px · lg 1080px ·
     xl 1280px · 2xl 1620px. Use these values when adding media queries. */

  /* (component utilities like .skip-link are defined after :root, below) */

  /* ── Back-compat aliases → canonical (legacy names, do not add new ones) ─── */
  --brand-purple:    var(--brand-primary);
  --brand-purple-dk: var(--brand-primary-dk);
  --brand-purple-md: var(--brand-primary-md);
  --brand-purple-lt: var(--brand-primary-lt);
  --brand-purple-bg: var(--brand-primary-soft);
  --brand-purple-bd: var(--brand-primary-border);
  --lenovo-red:        var(--brand-primary);
  --lenovo-red-dark:   var(--brand-primary-dk);
  --lenovo-red-soft:   var(--brand-primary-soft);
  --lenovo-red-border: var(--brand-primary-border);
}

/* Skip-to-content link (WCAG 2.4.1 bypass blocks). Hidden until keyboard-focused,
   then slides into view as the first focusable element on the page. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: var(--sw-z-skip-link, 910);
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md, 10px);
  font: 700 0.9rem/1 var(--font-sans, sans-serif);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}