/* ============================================================
   FlowForge — design tokens · Pass 1 (v0.1, 7 Jul 2026)
   ------------------------------------------------------------
   RULES (the contract that makes any tenant brand pass WCAG AA)

   1. Tenant brand colours exist ONLY in the --brand-* slots below.
      They may touch: top bar, primary buttons, active/selected
      states, focus rings, first chart series, login brand panel.
      They may NEVER be used for body text, fine borders, or
      status colours (success / warning / danger are platform-owned).

   2. --brand-primary is the tenant's raw colour. It may only be
      used on surfaces that carry NO text (accent strips, chart
      series, logo mark, decorative panels).

   3. --brand-primary-safe is the DERIVED fill for any surface
      that carries text (buttons, top bar, active nav). Rule:
      if contrast(white on raw) >= 4.5 → safe = raw;
      else darken raw in OKLCH (hold hue/chroma) until white
      passes 4.5. Server computes this once when a tenant saves
      branding. --brand-on-primary is therefore ALWAYS #fff.

   4. --brand-text is the darkest AA-on-white shade of the brand:
      raw darkened until contrast on #fff >= 4.5. Used for active
      nav labels, links inside brand-tinted chips, etc.

   5. Everything not --brand-* is identical for every tenant.
   ============================================================ */

:root {
  /* ---- neutral scale (navy-tinted, cool) ---- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFCFD;
  --n-50:  #F5F7F9;
  --n-100: #ECEFF3;
  --n-200: #DDE2E9;
  --n-300: #C2CAD4;
  --n-400: #97A2B0;
  --n-500: #6C7A8B;
  --n-600: #4E5D70;
  --n-700: #39485C;
  --n-800: #243447;
  --n-900: #131F2E;

  /* ---- semantic neutrals ---- */
  --ink:    var(--n-900);   /* headings, primary text            */
  --ink-2:  var(--n-700);   /* secondary text                    */
  --ink-3:  var(--n-500);   /* meta text, min AA on white/50     */
  --surface: var(--n-50);   /* app canvas                        */
  --panel:  var(--n-0);     /* cards, sidebar, sheets            */
  --line:   var(--n-200);   /* hairline borders                  */
  --line-strong: var(--n-300);

  /* ---- status (platform-owned, never tenant) ---- */
  --ok:          #1E7B3C;  --ok-soft:     #E6F3EA;
  --warn:        #8A5A00;  --warn-soft:   #FBF1DE;
  --danger:      #B3261E;  --danger-soft: #FBEAE9;
  --info:        #1C64D9;  --info-soft:   #E9F0FC;

  /* ---- type (Arial only — SO brand rule; also the fastest
          possible stack for server-rendered CI4 views) ---- */
  --font:      Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  --fs-caption: 11px;   /* ALL-CAPS labels, letter-spacing .08em */
  --fs-body-s:  12.5px;
  --fs-body:    14px;
  --fs-body-l:  16px;
  --fs-h3:      18px;
  --fs-h2:      22px;
  --fs-h1:      28px;
  --fs-display: 36px;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  /* ---- spacing (4px base) ---- */
  --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;

  /* ---- shape (SO brand: strictly angular) ---- */
  --radius: 0;
  --radius-inner: 2px;   /* permitted only for tiny sub-elements */

  /* ---- elevation (none on content; overlays only) ---- */
  --shadow-overlay: 0 8px 28px rgba(15, 36, 64, 0.18);

  /* ---- motion ---- */
  --t-fast: 140ms ease-out;
  --t-med:  240ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- focus (platform-neutral fallback; themes override) ---- */
  --focus-ring: #1C64D9;

  /* ---- layout ---- */
  --sidebar-w: 248px;
  --topbar-h:  52px;

  /* ---- brand slots — DEFAULT = master control plane theme ---- */
  --brand-primary:      #0F2440;
  --brand-primary-safe: #0F2440;  /* white on navy = 14.9:1 ✓ */
  --brand-on-primary:   #FFFFFF;
  --brand-accent:       #1F6FEB;  /* white on it = 4.65:1 ✓    */
  --brand-tint:         #EAF1FE;
  --brand-text:         #1B5FC4;  /* on white = 5.2:1 ✓        */
}

/* ============================================================
   Demo tenant themes — these values are what the server would
   compute from the tenant's saved primary + accent.
   ============================================================ */

/* CheckRight Vehicle Inspections — primary #E0592A (orange).
   Raw orange fails with white (3.7:1) AND with ink (4.45:1),
   so rule 3 kicks in: safe fill darkened to #B23E13 → 5.8:1 ✓ */
[data-theme="checkright"] {
  --brand-primary:      #E0592A;
  --brand-primary-safe: #B23E13;
  --brand-on-primary:   #FFFFFF;
  --brand-accent:       #17456E;
  --brand-tint:         #FCEEE8;
  --brand-text:         #A93A11;  /* on white = 6.0:1 ✓ */
  --focus-ring:         #B23E13;
}

/* ShieldPest Control — primary #2E7D46 (green).
   White on raw = 5.07:1 ✓ → safe = raw, no derivation needed. */
[data-theme="shieldpest"] {
  --brand-primary:      #2E7D46;
  --brand-primary-safe: #2E7D46;
  --brand-on-primary:   #FFFFFF;
  --brand-accent:       #3E7CA6;
  --brand-tint:         #E9F3EC;
  --brand-text:         #256B3B;  /* on white = 6.1:1 ✓ */
  --focus-ring:         #2E7D46;
}

/* Master control plane — explicit for symmetry (equals :root). */
[data-theme="master"] {
  --brand-primary:      #0F2440;
  --brand-primary-safe: #0F2440;
  --brand-on-primary:   #FFFFFF;
  --brand-accent:       #1F6FEB;
  --brand-tint:         #EAF1FE;
  --brand-text:         #1B5FC4;
  --focus-ring:         #1F6FEB;
}

/* ============================================================
   Reduced motion — hard floor, applies to everything.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}