/* =========================================================
   Modfix — Design tokens
   Palette: "Corporate Dystopia / Modern Blue" (carried over from the
   previous build unchanged). Shared by every page: public site, intake
   wizard, tracker, shop AND the admin panel. Nothing else defines colours.
   ========================================================= */

:root {
  /* Backgrounds & surfaces */
  --bg-void: #0A0A0A;
  --bg-slate: #0F172A;
  --bg-card: #1E293B;
  --bg-card-hover: #253145;
  --bg-input: #0F172A;

  /* Accents & interaction */
  --cyan: #38BDF8;
  --cyan-dim: rgba(56, 189, 248, 0.14);
  --cyan-hover: #67CBFA;
  --blue: #2563EB;
  --blue-hover: #1D4ED8;
  --blue-dim: rgba(37, 99, 235, 0.16);
  --blue-soft: #6D97FB;
  --amber: #F59E0B;
  --amber-dim: rgba(245, 158, 11, 0.14);
  --red: #EF4444;
  --red-dim: rgba(239, 68, 68, 0.14);
  --green: #22C55E;
  --green-dim: rgba(34, 197, 94, 0.14);
  --violet: #A78BFA;
  --violet-dim: rgba(167, 139, 250, 0.16);

  /* Text */
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-faint: #64748B;
  --text-on-accent: #0A0A0A;

  /* Borders */
  --border: #334155;
  --border-soft: #1E293B;

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
  --shadow-glow-cyan: 0 0 0 1px rgba(56,189,248,.4), 0 0 24px rgba(56,189,248,.18);
  --shadow-glow-blue: 0 10px 24px rgba(37,99,235,.35);

  /* Type */
  --font-head: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1180px;
  --header-h: 72px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 76px;
  --z-header: 100;
  --z-sidebar: 40;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Print (T10). The site is dark; a printer forces white paper, so a label
     drawn in --text-main on --bg-card comes out as a black rectangle with grey
     writing on it. These three are the only light values in the product outside
     mail-templates.js, and they are used exclusively inside `@media print`. */
  --print-paper: #FFFFFF;
  --print-ink: #000000;
  --print-ink-soft: #444444;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s;
  --t-base: .22s;

  color-scheme: dark;
}