/* ==========================================================================
   CENTINELA — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Every other stylesheet reads from here — never hardcode a raw value
   downstream of this file.
   ========================================================================== */

/* --- Self-hosted fonts (no CDN dependency — must render offline) -------- */

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-800.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/barlow-condensed-900.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-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/ibm-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/ibm-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/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-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/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  /* ------------------------------------------------------------------ *
   * COLOR — Graphite neutral ramp (navy-tinted end to end, not grey)
   * ------------------------------------------------------------------ */
  --graphite-950: #0b1220; /* sidebar / topbar / landing hero bg */
  --graphite-900: #121a28; /* primary text on light surfaces */
  --graphite-800: #1b2534; /* elevated dark surface */
  --graphite-700: #2a3646; /* borders on dark surfaces */
  --graphite-600: #3e4c5e; /* secondary text on light surfaces */
  --graphite-500: #5b6b80; /* muted / tertiary text */
  --graphite-400: #7c8ca0; /* meaningful borders (inputs, table rules) */
  --graphite-300: #a4b0bf; /* disabled text/icons only */
  --graphite-200: #c7d0d9; /* decorative dividers */
  --graphite-100: #e1e6eb; /* subtle fills, row hover */
  --graphite-50: #f4f6f8; /* app canvas background */
  --white: #ffffff;

  /* Safety-orange brand accent — split by surface, do not swap the two */
  --orange-500: #e8590c; /* on-dark decorative use ONLY (icons, active-nav, hero accents) */
  --orange-600: #d9480f; /* hover state */
  --orange-700: #b8380a; /* on-light text/buttons/links ONLY (orange-500 fails AA on white) */

  /* Semantic aliases — components should reference these, not primitives */
  --color-canvas: var(--graphite-50);
  --color-surface: var(--white);
  --color-surface-dark: var(--graphite-950);
  --color-surface-dark-elevated: var(--graphite-800);
  --color-text-primary: var(--graphite-900);
  --color-text-secondary: var(--graphite-600);
  --color-text-muted: var(--graphite-500);
  --color-text-on-dark: #f4f6f8;
  --color-text-on-dark-muted: #a4b0bf;
  --color-border: var(--graphite-200);
  --color-border-strong: var(--graphite-400);
  --color-border-dark: var(--graphite-700);
  --color-accent: var(--orange-700);
  --color-accent-hover: var(--orange-600);
  --color-accent-on-dark: var(--orange-500);
  --color-focus-ring: #2563eb;

  /* Finding lifecycle status (mutually exclusive) — text-on-tint pairs */
  --status-draft-text: var(--graphite-600);
  --status-draft-bg: var(--graphite-100);
  --status-open-text: #1d5a8c;
  --status-open-bg: #e6f0f8;
  --status-open-solid: #1d5a8c;
  --status-progress-text: #0f766e;
  --status-progress-bg: #e6fbf7;
  --status-progress-solid: #0f766e;
  --status-pending-text: #92400e;
  --status-pending-bg: #fffbeb;
  --status-pending-solid: #b45309;
  --status-closed-text: #166534;
  --status-closed-bg: #f0fdf4;
  --status-closed-solid: #15803d;
  --status-rejected-text: #b91c1c;
  --status-rejected-bg: #fef2f2;
  --status-rejected-solid: #dc2626;
  --status-overdue-accent: #c2410c; /* border/icon modifier layered on open/progress, not a 7th status */
  --status-locked-text: #334155;
  --status-locked-bg: #f1f5f9;
  --status-locked-solid: #475569;

  /* Severity tag (independent of lifecycle status) */
  --severity-low-text: var(--graphite-600);
  --severity-low-bg: var(--graphite-100);
  --severity-medium-text: #92400e;
  --severity-medium-bg: #fffbeb;
  --severity-high-text: var(--orange-700);
  --severity-high-bg: #fdf1ea;
  --severity-critical-text: #7f1d1d;
  --severity-critical-bg: #fef2f2;
  --severity-critical-solid: #7f1d1d;

  /* Categorical chart palette — 8 hues, no purple, no reuse of alarm-red */
  --chart-1: #1d5a8c; /* steel blue */
  --chart-2: #0f766e; /* teal */
  --chart-3: #475569; /* slate */
  --chart-4: #a16207; /* ochre */
  --chart-5: #9a3412; /* rust */
  --chart-6: #4d7c0f; /* moss */
  --chart-7: #78350f; /* umber brown */
  --chart-8: #b45252; /* dusty brick */

  /* ------------------------------------------------------------------ *
   * TYPOGRAPHY
   * ------------------------------------------------------------------ */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-display-wide: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-display: 800 clamp(2.25rem, 4vw, 3.5rem) / 1.05 var(--font-display-wide);
  --text-h1: 700 1.75rem/1.2 var(--font-display);
  --text-h2: 700 1.375rem/1.25 var(--font-display);
  --text-h3: 600 1.125rem/1.3 var(--font-display);
  --text-eyebrow: 700 0.75rem/1.3 var(--font-display);
  --text-body-lg: 400 1rem/1.5 var(--font-body);
  --text-body: 400 0.875rem/1.5 var(--font-body);
  --text-small: 400 0.8125rem/1.45 var(--font-body);
  --text-caption: 400 0.75rem/1.4 var(--font-body);
  --text-micro: 600 0.6875rem/1.3 var(--font-body);
  --text-kpi-hero: 600 clamp(2.5rem, 4vw, 3.5rem) / 1 var(--font-mono);
  --text-kpi-secondary: 600 1.75rem/1.1 var(--font-mono);

  /* ------------------------------------------------------------------ *
   * SPACING — 4px base unit
   * ------------------------------------------------------------------ */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-24: 6rem; /* 96px */

  /* ------------------------------------------------------------------ *
   * RADIUS — restrained on purpose (engineered-instrument-panel read,
   * not the 16–24px pill-everything softness of generic SaaS)
   * ------------------------------------------------------------------ */
  --radius-sm: 4px; /* controls: inputs, buttons, small chips */
  --radius-md: 8px; /* cards, panels */
  --radius-lg: 12px; /* modals, large panels */
  --radius-full: 999px; /* pills/badges — functionally required, not decorative softness */

  /* ------------------------------------------------------------------ *
   * SHADOW — light surfaces need it; dark chrome mostly doesn't
   * ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.08), 0 1px 3px rgba(11, 18, 32, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.14), 0 2px 8px rgba(11, 18, 32, 0.08);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ------------------------------------------------------------------ *
   * MOTION — brief, purposeful, never decorative for its own sake
   * ------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ------------------------------------------------------------------ *
   * Z-INDEX SCALE
   * ------------------------------------------------------------------ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ------------------------------------------------------------------ *
   * LAYOUT
   * ------------------------------------------------------------------ */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;
  --content-max-width: 1680px;
}