/* ============================================================================
   RMS Design System (D1) — in-code token root + faces
   Source of truth: projects/RMS/design/design-system.md (D1, authoritative).
   This file implements D1 §2 (color tokens), §3 (type scale), §4 (spacing /
   radius / elevation) as CSS custom properties, and self-hosts the three faces
   (§3): Archivo (display), IBM Plex Sans (body/UI), IBM Plex Mono (numeric).

   CONFORM to D1 — do not re-decide palette / type / layout here. Every value
   below is transcribed from D1; component styles reference these tokens only
   (never hardcoded hex / font-family).
   ========================================================================== */

/* -- §3 Faces (self-hosted, OFL) — actually loaded, never a system fallback -- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-800.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
}

:root {
  /* ---- Font families — adopt the template's face (Roboto, the MudBlazor default), NOT the
     design-system's Archivo/IBM-Plex. App-specific styles may arrange elements, never override the
     template's typography. The mono token keeps a SYSTEM monospace purely for tabular numeric
     alignment (arrangement), not a custom loaded face. ---- */
  --rms-font-display: "Roboto", system-ui, sans-serif;   /* display / titles — template face */
  --rms-font-body: "Roboto", system-ui, sans-serif;      /* body / UI — template face */
  --rms-font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, monospace; /* tabular numerics */

  /* ---- Neutrals — adopt the template's MudBlazor palette so surfaces + text theme-adapt
     (light AND dark) instead of overriding with a fixed light system. ---- */
  --rms-canvas: var(--mud-palette-background);
  --rms-surface: var(--mud-palette-surface);
  --rms-surface-sunken: var(--mud-palette-background-gray);
  --rms-border: var(--mud-palette-lines-default);
  --rms-text: var(--mud-palette-text-primary);
  --rms-text-secondary: var(--mud-palette-text-secondary);
  --rms-text-tertiary: var(--mud-palette-text-disabled);

  /* ---- §2.1 Neutrals — Dark system (Display, SCR-035) ---- */
  --rms-d-canvas: #0B0F14;
  --rms-d-tile: #141B22;
  --rms-d-tile-raised: #1C2530;
  --rms-d-grid: #2A343F;
  --rms-d-text: #F5F8FB;
  --rms-d-text-secondary: #AEBAC6;

  /* ---- Role colors — mapped to the template palette (Owner + Manager = primary/ember,
     Shift Lead = secondary/cerulean, Staff = tertiary). Tranche 16: keyed to the four roles. ---- */
  --rms-role-manager: var(--mud-palette-primary);
  --rms-role-manager-on: var(--mud-palette-primary-text);
  --rms-role-manager-tint: var(--mud-palette-background-gray);
  --rms-role-manager-on-tint: var(--mud-palette-primary);
  --rms-role-shiftlead: var(--mud-palette-secondary);
  --rms-role-shiftlead-on: var(--mud-palette-secondary-text);
  --rms-role-shiftlead-tint: var(--mud-palette-background-gray);
  --rms-role-shiftlead-on-tint: var(--mud-palette-secondary);
  --rms-role-staff: var(--mud-palette-tertiary);
  --rms-role-staff-on: var(--mud-palette-tertiary-text);
  --rms-role-staff-tint: var(--mud-palette-background-gray);
  --rms-role-staff-on-tint: var(--mud-palette-tertiary);

  /* ---- 9-status ramp — mapped to the template palette's semantic slots (error / warning /
     info / success / secondary / neutral). ---- */
  --rms-status-blocked: var(--mud-palette-error);
  --rms-status-blocked-on: var(--mud-palette-error-text);
  --rms-status-overdue: var(--mud-palette-error);
  --rms-status-overdue-on: var(--mud-palette-error-text);
  --rms-status-unassigned: var(--mud-palette-warning);
  --rms-status-unassigned-on: var(--mud-palette-warning-text);
  --rms-status-pendingverification: var(--mud-palette-secondary);
  --rms-status-pendingverification-on: var(--mud-palette-secondary-text);
  --rms-status-inprogress: var(--mud-palette-info);
  --rms-status-inprogress-on: var(--mud-palette-info-text);
  --rms-status-pending: var(--mud-palette-text-secondary);
  --rms-status-pending-on: var(--mud-palette-surface);
  --rms-status-completed: var(--mud-palette-success);
  --rms-status-completed-on: var(--mud-palette-success-text);
  --rms-status-skipped: var(--mud-palette-text-disabled);
  --rms-status-skipped-on: var(--mud-palette-surface);
  --rms-status-canceled: var(--mud-palette-text-secondary);
  --rms-status-canceled-on: var(--mud-palette-text-secondary);

  /* ---- Escalation accents — template warning (L1) / error (L2) ---- */
  --rms-esc-1: var(--mud-palette-warning);   /* climbed to Shift Lead (L1) */
  --rms-esc-2: var(--mud-palette-error);     /* climbed to Manager (L2) */

  /* ---- Cash variance semantics (always sign + word, never color-alone) ---- */
  --rms-variance-over: var(--mud-palette-success);        /* +$ OVER  */
  --rms-variance-short: var(--mud-palette-error);         /* -$ SHORT */
  --rms-variance-balanced: var(--mud-palette-text-secondary); /* $0.00 BALANCED */

  /* ---- Focus & interaction utility — template primary ---- */
  --rms-focus: var(--mud-palette-primary);
  --rms-link: var(--mud-palette-primary);
  --rms-disabled: var(--mud-palette-action-disabled);

  /* ---- §6 Tenant accent — CHROME ONLY, quarantined from all semantics ----
     Platform-set (default TAVOLA = Tenant Brick). Forbidden in any status /
     role / escalation / variance component (lint-enforced). */
  --rms-tenant-accent: #A63D2E;
  --rms-tenant-accent-on: #FFFFFF;

  /* ---- §4.1 Spacing scale (4px base) ---- */
  --rms-space-2: 2px;
  --rms-space-4: 4px;
  --rms-space-8: 8px;
  --rms-space-12: 12px;
  --rms-space-16: 16px;
  --rms-space-24: 24px;
  --rms-space-32: 32px;
  --rms-space-48: 48px;
  --rms-space-64: 64px;

  /* ---- §4.2 Radius ---- */
  --rms-radius-ios: 12px;      /* iOS card / button */
  --rms-radius-web: 8px;       /* web panel / button / input */
  --rms-radius-chit: 6px;      /* Status Chit — ticket corner, not a pill */
  --rms-radius-tile: 4px;      /* Display tile */
  --rms-radius-avatar: 9999px; /* role avatar pill — full/circular */

  /* ---- structural line weights (D1 §2.3 / §2.4 / §4.3) ---- */
  --rms-border-hair: 1px;
  --rms-border-chit: 2px;      /* Blocked heavy border / focus ring */
  --rms-edgebar-l1: 4px;       /* §2.4 L1 leading edge-bar */
  --rms-edgebar-l2: 6px;       /* §2.4 L2 leading edge-bar / Display top-band */

  /* ---- §4.3 Elevation ---- */
  --rms-elev-ios-card: 0 2px 8px rgba(16, 24, 32, 0.08);
  --rms-elev-web-panel: 0 1px 2px rgba(16, 24, 32, 0.05);
  --rms-elev-modal: 0 8px 24px rgba(16, 24, 32, 0.18);

  /* ---- §3.2 Web type scale (px / weight) ---- */
  --rms-web-display-size: 32px;   --rms-web-display-weight: 700;  /* Archivo */
  --rms-web-h1-size: 24px;        --rms-web-h1-weight: 700;       /* Archivo */
  --rms-web-h2-size: 20px;        --rms-web-h2-weight: 600;       /* Plex Sans */
  --rms-web-h3-size: 16px;        --rms-web-h3-weight: 600;       /* Plex Sans */
  --rms-web-body-size: 14px;      --rms-web-body-weight: 400;     /* Plex Sans */
  --rms-web-table-size: 13px;     --rms-web-table-weight: 400;    /* Plex Sans */
  --rms-web-small-size: 12px;     --rms-web-small-weight: 500;    /* Plex Sans */
  --rms-web-numeric-size: 14px;   --rms-web-numeric-weight: 500;  /* Plex Mono */
  --rms-web-numeric-lg-size: 28px; --rms-web-numeric-lg-weight: 600; /* Plex Mono */

  /* ---- §3.3 Display type scale (distance) ---- */
  --rms-disp-hero-size: 72px;     --rms-disp-hero-weight: 800;
  --rms-disp-section-size: 48px;  --rms-disp-section-weight: 700;
  --rms-disp-status-size: 44px;   --rms-disp-status-weight: 800;
  --rms-disp-task-size: 34px;     --rms-disp-task-weight: 700;
  --rms-disp-meta-size: 28px;     --rms-disp-meta-weight: 600;
  --rms-disp-count-size: 64px;    --rms-disp-count-weight: 700;
}

/* ---- §3 Global numeric behavior: Plex Sans ships tabular-nums on ---- */
.rms-root {
  font-family: var(--rms-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--rms-text);
}

/* ---- §3 Web type-scale utility classes (face + size + weight bound to tokens) ---- */
.rms-type-display { font-family: var(--rms-font-display); font-size: var(--rms-web-display-size); font-weight: var(--rms-web-display-weight); line-height: 1.15; }
.rms-type-h1 { font-family: var(--rms-font-display); font-size: var(--rms-web-h1-size); font-weight: var(--rms-web-h1-weight); line-height: 1.2; }
.rms-type-h2 { font-family: var(--rms-font-body); font-size: var(--rms-web-h2-size); font-weight: var(--rms-web-h2-weight); }
.rms-type-h3 { font-family: var(--rms-font-body); font-size: var(--rms-web-h3-size); font-weight: var(--rms-web-h3-weight); }
.rms-type-body { font-family: var(--rms-font-body); font-size: var(--rms-web-body-size); font-weight: var(--rms-web-body-weight); }
.rms-type-table { font-family: var(--rms-font-body); font-size: var(--rms-web-table-size); font-weight: var(--rms-web-table-weight); }
.rms-type-small { font-family: var(--rms-font-body); font-size: var(--rms-web-small-size); font-weight: var(--rms-web-small-weight); }
.rms-type-numeric { font-family: var(--rms-font-mono); font-size: var(--rms-web-numeric-size); font-weight: var(--rms-web-numeric-weight); font-variant-numeric: tabular-nums; }
.rms-type-numeric-lg { font-family: var(--rms-font-mono); font-size: var(--rms-web-numeric-lg-size); font-weight: var(--rms-web-numeric-lg-weight); font-variant-numeric: tabular-nums; }