/* =================================================================
   Core Design Tokens — neutral, white-label baseline.

   This is the canonical primitive layer; components.css references these
   variables and stays identical across every deployment. Per-org branding is
   applied as DATA on top of this baseline (see src/Theme/ThemeSchema.php — the
   admin theme editor emits a `:root{…}` override after this file), never by
   editing core. The Font 211 @font-face blocks above are kept so the optional
   `font211` brand font can be selected; the default body font is the system
   stack. The ZPMV brand is captured as override data in themes/zpmv/theme.json.
   ================================================================= */

:root {
  /* ---------- Accent palette ---------- */
  --c-primary:        #2563EB;   /* accent — main interactive color */
  --c-primary-hover:  #1D4ED8;   /* hover / pressed */
  --c-primary-deep:   #0F172A;   /* headings, bars, body ink (neutral) */
  --c-primary-200:    #BFDBFE;   /* accent tint — active chip */
  --c-primary-100:    #DBEAFE;   /* accent surface tint, focus ring */

  /* ---------- Status ---------- */
  --c-success:        #22C55E;
  --c-warning:        #F59E0B;
  --c-danger:         #EF4444;   /* error, destructive */
  --c-danger-soft:    #F87171;

  /* ---------- Neutrals (slate) ---------- */
  --c-white:          #FFFFFF;
  --c-gray-50:        #F8FAFC;
  --c-gray-100:       #F1F5F9;   /* app surface */
  --c-gray-200:       #E2E8F0;   /* borders, dividers */
  --c-gray-300:       #CBD5E1;   /* disabled fill */
  --c-gray-500:       #64748B;   /* muted label */
  --c-gray-800:       #334155;
  --c-ink:            #0F172A;
  --c-black:          #000000;

  /* ---------- Surfaces (semantic) ---------- */
  --surface-app:      var(--c-gray-100);
  --surface-card:     var(--c-white);
  --surface-raised:   var(--c-white);
  --surface-sunken:   var(--c-gray-50);

  /* ---------- Text (semantic) ---------- */
  --text-primary:     var(--c-ink);
  --text-secondary:   var(--c-gray-500);
  --text-onbrand:     var(--c-white);
  --text-link:        var(--c-primary);
  --text-danger:      var(--c-danger);

  /* ---------- Border (semantic) ---------- */
  --border-subtle:    var(--c-gray-200);
  --border-strong:    var(--c-primary);
  --border-danger:    var(--c-danger);
  --border-divider:   var(--c-gray-200);

  /* ---------- Typography ---------- */
  /* Generic system stack by default. Selecting the `font211` brand font in the
     theme editor swaps --font-display / --font-body to the Font 211 stack. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale (px) */
  --fs-h1: 56px;   --lh-h1: 1.1;
  --fs-h2: 40px;   --lh-h2: 1.15;
  --fs-h3: 32px;   --lh-h3: 1.2;
  --fs-h4: 28px;   --lh-h4: 1.25;
  --fs-h5: 24px;   --lh-h5: 1.3;
  --fs-h6: 20px;   --lh-h6: 1.35;
  --fs-h7: 18px;   --lh-h7: 1.4;
  --fs-body:   16px;  --lh-body:   1.5;
  --fs-label:  14px;  --lh-label:  1;
  --fs-cap-13: 13px;
  --fs-cap-12: 12px;
  --fs-cap-10: 10px;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --track-eyebrow: 0.12em;

  /* ---------- Spacing (4px scale) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* ---------- Radii (moderate; --r-pill is a rounded rect by default) ---------- */
  --r-sm:   6px;    /* chip / tag */
  --r-md:   10px;   /* input, small card */
  --r-lg:   14px;   /* card */
  --r-pill: 8px;    /* button (set to --r-full for true pills) */
  --r-full: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.20);

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Sizing ---------- */
  --control-h-m: 44px;   /* M button / input */
  --control-h-s: 36px;   /* S button / chip */
  --container:   1280px;
}

/* ----- Base reset hook ----- */
html { color: var(--text-primary); }
body { font-family: var(--font-body); font-weight: var(--fw-regular); }