/* ==========================================================================
   Warnitor Design System — tokens.css  (v1.0)
   Dark-first. Import once at the root of the app:  @import "./tokens.css";
   Fonts: League Spartan (display), Figtree (UI/body), JetBrains Mono (data)
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --wn-brand-ink:        #22252D;  /* logo antrasit */
  --wn-brand-mint:       #00FFC2;  /* logo mint */

  /* ---- Surfaces (dark, back → front) ---------------------------------- */
  --wn-bg:               #14161B;  /* page background */
  --wn-bg-band:          #181A20;  /* alternating section band */
  --wn-surface:          #1A1D23;  /* large section / sidebar */
  --wn-surface-2:        #1C1F26;  /* cards, panels */
  --wn-surface-3:        #1F2229;  /* raised / selected row */
  --wn-overlay:          rgba(10, 11, 14, 0.72);

  /* ---- Lines ---------------------------------------------------------- */
  --wn-line:             #262A33;  /* dividers, section borders */
  --wn-line-strong:      #2D313A;  /* card borders, table rules */
  --wn-line-control:     #3A3F4A;  /* input & ghost-button borders */
  --wn-line-hover:       #4A505C;

  /* ---- Text (all ≥ 4.5:1 on --wn-bg) ---------------------------------- */
  --wn-text:             #ECEFF3;  /* primary */
  --wn-text-2:           #C9CFD7;  /* strong secondary */
  --wn-text-3:           #B9C0CA;  /* body secondary */
  --wn-text-muted:       #A2AAB5;  /* nav, meta */
  --wn-text-subtle:      #8F98A4;  /* captions, placeholders */

  /* ---- Accent ---------------------------------------------------------- */
  --wn-accent:           #00FFC2;
  --wn-accent-hover:     #7DFFE0;
  --wn-accent-press:     #00D9A5;
  --wn-on-accent:        #04241C;  /* text on mint */
  --wn-accent-deep:      #0B3D30;  /* mint badge background */
  --wn-accent-soft:      rgba(0, 255, 194, 0.10);

  /* ---- Status (always pair color with shape/label) -------------------- */
  --wn-up:               #00FFC2;  /* ● circle   */
  --wn-warn:             #FFB547;  /* ■ square   */
  --wn-warn-soft:        rgba(255, 181, 71, 0.08);
  --wn-down:             #FF7A6B;  /* ▲ triangle */
  --wn-down-text:        #FF9A8E;
  --wn-down-soft:        rgba(255, 122, 107, 0.08);
  --wn-paused:           #6B7480;  /* ○ dashed ring */

  /* ---- Risk levels (security audit) ----------------------------------- */
  --wn-risk-low:         #9DB4C8;
  --wn-risk-medium:      #FFB547;
  --wn-risk-high:        #FF7A6B;
  --wn-risk-critical:    #FF4D6D;

  /* ---- Paper (light documents: AI report, invoices, PDF export) ------- */
  --wn-paper:            #F4F6F8;
  --wn-paper-2:          #E6EAEE;
  --wn-paper-line:       #D5DAE0;
  --wn-paper-text:       #1B1E24;
  --wn-paper-text-2:     #2E343D;
  --wn-paper-text-3:     #4D5562;

  /* ---- Typography ------------------------------------------------------ */
  --wn-font-display:     "League Spartan", "Figtree", system-ui, sans-serif;
  --wn-font-sans:        "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wn-font-mono:        "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wn-text-display:     clamp(44px, 6vw, 76px);   /* hero h1 */
  --wn-text-h1:          clamp(38px, 5vw, 64px);   /* page title */
  --wn-text-h2:          clamp(34px, 4vw, 52px);   /* section title */
  --wn-text-h3:          clamp(26px, 3vw, 36px);
  --wn-text-h4:          21px;
  --wn-text-h5:          18px;
  --wn-text-lead:        20px;
  --wn-text-body:        17px;
  --wn-text-ui:          15px;   /* buttons, nav, table */
  --wn-text-caption:     13px;
  --wn-text-micro:       12px;

  --wn-leading-tight:    1.02;
  --wn-leading-heading:  1.1;
  --wn-leading-body:     1.6;
  --wn-tracking-display: -0.02em;

  --wn-weight-regular:   400;
  --wn-weight-medium:    500;
  --wn-weight-semibold:  600;
  --wn-weight-bold:      700;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --wn-space-1:  4px;   --wn-space-2:  8px;   --wn-space-3: 12px;
  --wn-space-4:  16px;  --wn-space-5: 20px;   --wn-space-6: 24px;
  --wn-space-8:  32px;  --wn-space-10: 40px;  --wn-space-12: 48px;
  --wn-space-14: 56px;  --wn-space-16: 64px;  --wn-space-20: 80px;
  --wn-space-24: 96px;  --wn-space-28: 112px; --wn-space-32: 128px;

  --wn-container:        1200px;
  --wn-container-narrow: 760px;
  --wn-gutter:           24px;
  --wn-section-y:        128px;  /* 96px on <860px */

  /* ---- Radius ---------------------------------------------------------- */
  --wn-radius-xs:   4px;   /* inline code */
  --wn-radius-sm:   6px;   /* chip, badge */
  --wn-radius-md:   8px;   /* button (sm), input */
  --wn-radius-lg:  10px;   /* button (lg) */
  --wn-radius-xl:  14px;   /* card, document */
  --wn-radius-2xl: 16px;   /* product panel */
  --wn-radius-full: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --wn-shadow-panel: 0 30px 60px -20px rgba(0, 0, 0, 0.60);
  --wn-shadow-toast: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  --wn-shadow-menu:  0 12px 28px -8px rgba(0, 0, 0, 0.50);

  /* ---- Motion ---------------------------------------------------------- */
  --wn-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --wn-dur-fast:   120ms;
  --wn-dur-base:   200ms;
  --wn-dur-slow:   360ms;

  /* ---- Focus ----------------------------------------------------------- */
  --wn-focus-ring: 0 0 0 2px var(--wn-bg), 0 0 0 4px var(--wn-accent);

  /* ---- Control sizes --------------------------------------------------- */
  --wn-control-sm: 36px;
  --wn-control-md: 44px;   /* min touch target */
  --wn-control-lg: 52px;
}

/* ---- Base ---------------------------------------------------------------- */
html { color-scheme: dark; scrollbar-color: var(--wn-line-control) var(--wn-bg); caret-color: var(--wn-accent); }
body {
  margin: 0; background: var(--wn-bg); color: var(--wn-text);
  font-family: var(--wn-font-sans); font-size: var(--wn-text-body); line-height: var(--wn-leading-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wn-accent); color: var(--wn-on-accent); }
:focus-visible { outline: 2px solid var(--wn-accent); outline-offset: 3px; border-radius: var(--wn-radius-sm); }
a { color: var(--wn-accent); text-underline-offset: 3px; }
a:hover { color: var(--wn-accent-hover); }
code, kbd, samp, .wn-mono { font-family: var(--wn-font-mono); font-size: 0.86em; }
.wn-num { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) { :root { --wn-section-y: 96px; } }
@media (prefers-reduced-motion: reduce) { :root { --wn-dur-fast: 0ms; --wn-dur-base: 0ms; --wn-dur-slow: 0ms; } }