/* ===========================================================================
   Afrihost NOC Incident Manager — tokens.css (NOC V2 design system)
   Ported from NOC V2/design-system/tokens/{typography,colors,spacing,base}.css.
   Light is the default; dark applies via html[data-mode="dark"] (persisted in
   localStorage 'noc-theme' by an inline head snippet on every page).
   Fonts are self-hosted in /fonts — no CDN. Load this file BEFORE main.css.
   =========================================================================== */

/* ── Fonts (Nunito Sans substitutes Afrihost Sans; swap when files arrive) ── */
@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-latin-wght.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Raw brand palette — hex values verbatim from the Brand Style Guide ──── */
:root {
  /* Neutrals (weather) */
  --white: #FFFFFF;
  --mist: #EFF2F5;
  --dew: #CED9E5;
  --hazy: #768692;
  --thunder: #333F48;
  /* Primary reds (fruits) */
  --plum: #D50032;
  --raspberry: #BA0C2F;
  /* Primary blues (bodies of water) */
  --puddle: #2AC4FF;
  --waterfall: #0095C8;
  --river: #4698CB;
  --lagoon: #005587;
  --ocean: #001624;
  /* Secondary (fruits and berries) */
  --pompom: #00E9DC;
  --lime: #78BE20;
  --leaf: #4A7729;
  --lemon: #FBE122;
  --mango: #FFB500;
  --orange: #EA7600;
  --strawberry: #F52F52;
  --grape: #A83D72;
  --cranberry: #E31C79;
  /* Gradients — always linear, 45deg top-left to bottom-right */
  --grad-raspberry: linear-gradient(45deg, #D50032 30%, #BA0C2F 70%);
  --grad-h2o: linear-gradient(45deg, #2AC4FF 20%, #0095C8 80%);
  --grad-brand: var(--grad-raspberry);
}

/* ── Typography / spacing / shape (mode-independent) ─────────────────────── */
:root {
  --font-ui: 'Nunito Sans', Verdana, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --control-h: 40px;
  --control-h-sm: 32px;

  --nav-height: 60px;
  --content-max-width: 1200px;
}

/* ── Semantic tokens — light mode defaults ───────────────────────────────── */
:root {
  --surface-page: var(--mist);
  --surface-card: var(--white);
  --surface-inset: #E5EBF1;
  --surface-hover: #E9EEF4;
  --text-body: var(--thunder);
  --text-secondary: #4A5560;
  --text-muted: var(--hazy);
  --text-disabled: #A6B3BE;
  --text-heading: var(--thunder);
  --text-on-brand: #FFFFFF;
  --border: var(--dew);
  --divider: var(--dew);
  --link: var(--plum);
  --link-hover: var(--raspberry);
  --brand-primary: var(--plum);
  --brand-primary-hover: var(--raspberry);
  --brand-accent: var(--lagoon);
  --brand-soft: #FBE3E9;
  --focus-ring: var(--puddle);
  --focus-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 40%, transparent);

  /* Status — brand rules: Lime = success, Orange = error (never red), Mango = warning */
  --success: var(--lime);      --success-soft: #EDF7DF;
  --warning: var(--mango);     --warning-soft: #FFF3D1;
  --error: var(--orange);      --error-soft: #FCEADB;
  --info: var(--waterfall);    --info-soft: #DFF2F9;
  /* Badge/ink text over the soft tints — flips per mode for contrast */
  --success-ink: var(--leaf);
  --warning-ink: #8A5A00;
  --error-ink: var(--error);
  --info-ink: var(--lagoon);
  --failed-ink: var(--plum);

  /* Incident severity — Critical keeps Plum (owner ruling: severity ranking,
     not error semantics). High/Med/Low per the V2 wireframe tones. */
  --sev-critical: var(--plum);
  --sev-high: var(--strawberry);
  --sev-medium: var(--orange);
  --sev-low: var(--mango);

  /* Record status accents — per-mode for contrast on the page surface */
  --status-open: var(--waterfall);
  --status-progress: var(--orange);
  --status-resolved: var(--leaf);
  --status-rfo: var(--lemon);

  /* Translucent tints (badges, calendar blocks) — follow the tokens above,
     so they resolve correctly in both modes */
  --tint-open: color-mix(in srgb, var(--status-open) 14%, transparent);
  --tint-progress: color-mix(in srgb, var(--status-progress) 14%, transparent);
  --tint-resolved: color-mix(in srgb, var(--success) 16%, transparent);
  --tint-failed: color-mix(in srgb, var(--plum) 12%, transparent);
  --tint-warning: color-mix(in srgb, var(--warning) 18%, transparent);
  --tint-neutral: color-mix(in srgb, var(--hazy) 16%, transparent);
  --mark-bg: rgba(251, 225, 34, 0.35);
  --overlay: rgba(0, 22, 36, 0.55);

  --shadow-sm: 0 1px 2px rgba(0, 22, 36, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 22, 36, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 22, 36, 0.20);
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
[data-mode="dark"] {
  --surface-page: var(--ocean);
  --surface-card: #0A2536;
  --surface-inset: #071D2C;
  --surface-hover: #12314A;
  --text-body: var(--mist);
  --text-secondary: var(--dew);
  --text-muted: #8CA3B5;
  --text-disabled: #3D5066;
  --text-heading: #FFFFFF;
  --border: #1F3A4D;
  --divider: #1F3A4D;
  --link: var(--puddle);
  --link-hover: #7BDCFF;
  --brand-soft: #3A0E1E;
  --success-soft: #1E2F10;
  --warning-soft: #332605;
  --error-soft: #331B06;
  --info-soft: #06293A;
  --success-ink: var(--lime);
  --warning-ink: var(--mango);
  --info-ink: var(--puddle);
  --failed-ink: #FF5C7C;
  --status-open: var(--puddle);
  --status-resolved: var(--lime);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}