/* ════════════════════════════════════════════════════════════════
   Design tokens — the single source of truth for the visual system.

   Loaded BEFORE saleshunt.css so legacy rules can consume these values,
   and so a tenant's --accent override in base.html still wins (it is set
   on :root inline, after both sheets).

   Rules of the road:
     • Never hardcode a colour, radius, shadow or duration in a component
       sheet or a template — reach for a token. If a token is missing,
       add it here rather than inventing a one-off value.
     • Spacing is an 8pt grid with 4pt half-steps. Anything outside the
       scale is a bug, not a preference.
     • The legacy aliases at the bottom keep the existing pages working
       while screens migrate; delete an alias only when nothing uses it.
════════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette: neutrals ────────────────────────────────────────
     A single hue-consistent ramp. Text uses 800/600/500, surfaces
     000/50/100, lines 200/300. */
  --c-neutral-000:#ffffff;
  --c-neutral-50:#f7faf9;
  --c-neutral-100:#eef2f1;
  --c-neutral-200:#e2e8e6;
  --c-neutral-300:#cbd5d1;
  --c-neutral-400:#9aa4ad;
  --c-neutral-500:#6c7680;
  --c-neutral-600:#4a5560;
  --c-neutral-700:#2a3340;
  --c-neutral-800:#1b2430;

  /* ── Palette: brand + status ──────────────────────────────────
     Each status has a solid (text/icon/border) and a tint (surface).
     Pairs are contrast-checked against their tint at 4.5:1. */
  --c-brand-50:#e9f4f1;
  --c-brand-100:#cfe7e1;
  --c-brand-500:#2c8a7d;
  --c-brand-600:#23665c;
  --c-brand-700:#1a4d45;

  --c-success-50:#dcfce7;  --c-success-500:#16a34a; --c-success-600:#15803d;
  --c-warning-50:#fef3c7;  --c-warning-500:#d97706; --c-warning-600:#b45309;
  --c-danger-50:#fee2e2;   --c-danger-500:#dc2626;  --c-danger-600:#b91c1c;
  --c-info-50:#dbeafe;     --c-info-500:#2563eb;    --c-info-600:#1d4ed8;

  /* ── Typography ───────────────────────────────────────────────
     Sora for headings (distinct), Inter for UI text (legible at 13px).
     A 1.2 modular scale, rounded to whole pixels. */
  --font-sans:'Inter','Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;

  --text-xs:11px;
  --text-sm:12px;
  --text-base:14px;
  --text-md:16px;
  --text-lg:19px;
  --text-xl:23px;
  --text-2xl:28px;
  --text-3xl:34px;

  --leading-tight:1.25;
  --leading-normal:1.55;
  --leading-loose:1.7;

  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-tight:-.01em;
  --tracking-wide:.06em;

  /* ── Spacing: 8pt grid with 4pt half-steps ────────────────────── */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* ── Radii ────────────────────────────────────────────────────── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-xl:16px;
  --radius-full:999px;

  /* ── Elevation ────────────────────────────────────────────────
     Four steps only. More than that and nothing reads as "raised". */
  --elevation-0:none;
  --elevation-1:0 1px 2px rgba(20,45,40,.05);
  --elevation-2:0 1px 2px rgba(20,45,40,.04),0 6px 20px rgba(20,45,40,.05);
  --elevation-3:0 14px 40px rgba(20,45,40,.10);
  --elevation-4:0 24px 60px rgba(20,45,40,.16);

  /* ── Motion ───────────────────────────────────────────────────
     Fast for state, base for movement, slow for entrances. */
  --duration-fast:120ms;
  --duration-base:180ms;
  --duration-slow:260ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);

  /* ── Layering ─────────────────────────────────────────────────
     Named so nobody has to invent z-index: 9999 again. */
  --z-base:1;
  --z-sticky:50;
  --z-sidebar:100;
  --z-drawer:1040;
  --z-modal:1050;
  --z-toast:1080;

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-w:240px;
  --header-h:60px;
  --content-max:1600px;

  /* ── Focus ────────────────────────────────────────────────────
     One visible focus treatment everywhere; keyboard users should never
     have to hunt for the caret. */
  --focus-ring:0 0 0 3px var(--c-brand-100);

  /* ════════════════════════════════════════════════════════════
     Legacy aliases — every name the existing sheets already use.
     Keeps one definition of each value while screens migrate.
  ════════════════════════════════════════════════════════════ */
  --white:var(--c-neutral-000);
  --off:var(--c-neutral-50);
  --off2:var(--c-neutral-100);
  /* One ramp step darker than the original 200/300 — borders read as
     barely-there against --off/--white at the old values. --dark (body
     text, neutral-700) is left alone: it's already dark enough: this is
     about the lighter tiers (borders + secondary/meta text). */
  --border:var(--c-neutral-300);
  --border2:var(--c-neutral-400);
  --black:var(--c-neutral-800);
  --dark:var(--c-neutral-700);
  --muted:var(--c-neutral-600);
  --muted2:var(--c-neutral-500);
  --accent:var(--c-brand-500);
  --accent2:var(--c-brand-600);
  --accent-light:var(--c-brand-50);
  --accent-mid:var(--c-brand-100);
  --green:var(--c-success-500);       --green-light:var(--c-success-50);
  --amber:var(--c-warning-500);       --amber-light:var(--c-warning-50);
  --red:var(--c-danger-500);          --red-light:var(--c-danger-50);
  --blue:var(--c-info-500);           --blue-light:var(--c-info-50);
  --radius:12px;
  --radius-lg:var(--radius-xl);
  --shadow:var(--elevation-2);
  --shadow-lg:var(--elevation-3);
  --transition:all var(--duration-base) ease;
}

/* Honour the OS "reduce motion" setting: animation is decoration, and for
   some users it is a symptom trigger. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}