/* ==========================================================================
   SOVEREIGN ROSTER — DESIGN TOKENS
   Calm, dense, precise operations interface (WCAG AA compliant, 4px grid)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography / Fonts (Vendored local WOFF2, no external CDNs)
   -------------------------------------------------------------------------- */

/* Saira: Headings, KPI numbers, Section titles */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/vendor/fonts/saira-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/vendor/fonts/saira-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/vendor/fonts/saira-latin-700-normal.woff2') format('woff2');
}

/* IBM Plex Sans: UI, body, tables, labels */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/vendor/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/vendor/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/vendor/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

/* IBM Plex Mono: SIA numbers, employee numbers, postcodes, phone numbers, IDs */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Root Variables
   -------------------------------------------------------------------------- */
:root {
  /* Brand Blues */
  --blue-950: #061633;
  --blue-900: #0a2259;
  --blue-800: #0e2f7a;
  --blue-600: #1d5fe0; /* Primary brand action */
  --blue-500: #3b78ee;
  --blue-100: #e6eefc;
  --blue-50:  #f2f6fd;

  /* Brand Golds (Accents only: active markers, thin rules, highlights) */
  --gold-500: #ebc96a;
  --gold-600: #c9a24b;
  --gold-100: #fbf3d9;

  /* Neutrals */
  --text-primary:   #14213d;
  --text-secondary: #3a4a68;
  --text-muted:     #6b778c;
  --border-input:   #c3cde0;
  --border-hairline:#d9e0ec;
  --fill-subtle:    #eaeef5;
  --bg-page:        #f4f6fa;
  --surface:        #ffffff;

  /* Status Tokens (Text on Tint - WCAG AA verified) */
  --status-success-text: #167a54;
  --status-success-bg:   #e3f4ec;
  --status-warning-text: #8a6200;
  --status-warning-bg:   #fdf1cc;
  --status-danger-text:  #a82727;
  --status-danger-bg:    #fbe4e4;
  --status-info-text:    #1850c0;
  --status-info-bg:      #e6eefc;
  --status-neutral-text: #4b5870;
  --status-neutral-bg:   #eaeef5;

  /* Typography Font Families */
  --font-display: 'Saira', sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography Scale */
  --font-size-kpi:   32px;
  --font-size-title: 24px;
  --font-size-h2:    18px;
  --font-size-h3:    15px;
  --font-size-card:  14px;
  --font-size-body:  14px;
  --font-size-table: 13px;
  --font-size-label: 12.5px;
  --font-size-meta:  12px;
  --font-size-small: 11px;

  /* 4px Spacing Grid */
  --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;

  /* Radii */
  --radius-tag:    2px;
  --radius-input:  3px;
  --radius-button: 3px;
  --radius-panel:  4px;

  /* Control Heights */
  --control-height:    34px;
  --control-height-sm: 30px;
  --table-row-height:  40px;

  /* Shadows (Minimal, flat design - only for overlay layers) */
  --shadow-dropdown: 0 4px 12px rgba(6, 22, 51, 0.12);
  --shadow-modal:    0 12px 32px rgba(6, 22, 51, 0.20);

  /* Focus & Borders */
  --border-hairline-width: 1px;
  --focus-ring-color: var(--blue-600);
  --focus-ring: 2px solid var(--blue-600);
  --focus-offset: 2px;
}