/* =========================================================================
   Liuify Design System — Colors & Type
   Operator-grade, cockpit aesthetic. Dark by default.
   ========================================================================= */

/* --- Fonts --------------------------------------------------------------- */
/* Liuify type stack (display/UI):  Söhne → General Sans → Inter Display → system-ui
   Liuify type stack (mono/data):   JetBrains Mono → IBM Plex Mono → ui-monospace

   Söhne is a commercial typeface and not included. General Sans (Indian Type
   Foundry) is shipped via the Google Fonts @import below (Inter Tight as
   visual stand-in until a licensed Söhne file is provided). JetBrains Mono is
   bundled locally. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Google Fonts fallback loader — if local woff2 files are missing, this
   imports Inter Tight and JetBrains Mono so nothing crashes on first load. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap");

:root {
  /* ======================================================================
     COLOR TOKENS — Brand
     ====================================================================== */

  /* Ink — the floor. Not pure black. Green-tinted to feel organic.
     11-stop canonical ramp. 900 is the default shell; 950 is optional floor. */
  --ink-950: #070B09;   /* root / floor — optional, extra depth */
  --ink-900: #0B0F0D;   /* app shell */
  --ink-800: #141A17;   /* panels */
  --ink-700: #1E2722;   /* cards / elevated */
  --ink-600: #2F3A34;   /* borders, dividers */
  --ink-500: #4A5650;   /* subtle ui, hairlines on dark */
  --ink-400: #6F7C76;   /* disabled fg, helper text */
  --ink-300: #9AA69F;   /* secondary fg */
  --ink-200: #C2CCC7;   /* tertiary fg / labels */
  --ink-100: #E0E6E3;   /* hi-contrast tertiary */
  --ink-50:  #F1F4F2;   /* pure light surface (light mode only) */

  /* Mint family — split by role. Do not reuse one mint for all jobs. */
  --mint-500:      #6CFFB1;   /* brand-mint: CTA + focus + selected ONLY */
  --mint-600:      #4EE89A;   /* hover / pressed on CTA */
  --mint-400:      #8CFFC4;   /* lift / hover surface */
  --mint-deep:     #3FE093;   /* data-positive + signal-success */
  --mint-300:      rgba(108, 255, 177, 0.18);  /* selected bg on dark */
  --mint-200:      rgba(108, 255, 177, 0.10);  /* signal halo */
  --mint-100:      rgba(108, 255, 177, 0.04);  /* faint wash */

  /* Amber — attention. Not a warning yet. */
  --amber-500: #F6B14B;
  --amber-600: #E89A2E;
  --amber-300: rgba(246, 177, 75, 0.18);
  --amber-200: rgba(246, 177, 75, 0.10);

  /* Rust — critical. Never pure red; warmed so it reads on dark.
     CB-risk: sits close to amber under protan/deuteran simulation.
     Rule: danger is ALWAYS paired with an icon, never color alone. */
  --rust-500: #CC5840;          /* shifted redder from #D86A4B for CB safety */
  --rust-600: #B84A34;
  --rust-300: rgba(204, 88, 64, 0.18);
  --rust-200: rgba(204, 88, 64, 0.10);

  /* Data viz — 6 colors with a fixed deal order. Use in sequence. */
  --data-1-cyan:   #6FCFE8;
  --data-2-violet: #9B8CFF;
  --data-3-teal:   #4FC7B1;
  --data-4-amber:  #F6B14B;
  --data-5-rose:   #E8A0C5;
  --data-6-sand:   #C9BE9E;

  /* Back-compat aliases for existing call sites. */
  --data-cyan:   var(--data-1-cyan);
  --data-violet: var(--data-2-violet);
  --data-rose:   var(--data-5-rose);

  /* ======================================================================
     SEMANTIC TOKENS
     ====================================================================== */

  --bg:              var(--ink-900);
  --bg-sidebar:      var(--ink-800);
  --surface:         var(--ink-700);
  --surface-hover:   var(--ink-700);
  --surface-raised:  var(--ink-700);

  --fg:              var(--ink-100);    /* primary text on dark */
  --fg-strong:       var(--ink-50);     /* highest-contrast text */
  --fg-muted:        var(--ink-200);    /* secondary / body */
  --fg-subtle:       var(--ink-300);    /* tertiary / labels */
  --fg-disabled:     var(--ink-400);    /* disabled / helper */

  --border:          var(--ink-600);    /* borders, dividers */
  --border-subtle:   var(--ink-500);    /* hairlines on dark */
  --divider:         var(--ink-600);

  --accent:          var(--mint-500);
  --accent-hover:    var(--mint-400);
  --accent-press:    var(--mint-600);
  --accent-bg:       var(--mint-300);
  --accent-bg-faint: var(--mint-200);
  --accent-on:       #062018;      /* text color on mint buttons */

  --warning:         var(--amber-500);
  --warning-bg:      var(--amber-300);

  --critical:        var(--rust-500);
  --critical-bg:     var(--rust-300);

  /* Semantic signal + data roles — keep distinct from brand-mint. */
  --signal-live:     var(--mint-500);  /* pulsing live dot, live badge */
  --signal-success:  var(--mint-deep); /* success state, completed */
  --signal-warning:  var(--amber-500);
  --signal-critical: var(--rust-500);

  /* Info is neutral, never cyan. Cyan is reserved for data viz. */
  --info-bg:     var(--ink-700);
  --info-fg:     var(--ink-100);
  --info-border: var(--ink-500);

  --data-positive:   var(--mint-deep);  /* charts, delta up */
  --data-negative:   var(--rust-500);   /* charts, delta down */
  --positive:        var(--data-positive);  /* back-compat alias */
  --negative:        var(--data-negative);  /* back-compat alias */

  --focus-ring:      var(--mint-500);

  /* ======================================================================
     TYPE TOKENS
     ====================================================================== */

  --font-display: "General Sans", "Inter Tight", "Inter Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui:      "General Sans", "Inter Tight", "Inter Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale — tight, operator density */
  --fs-micro:   10px;   /* tags, uppercase labels */
  --fs-caption: 11px;
  --fs-small:   12px;
  --fs-body:    13px;   /* UI default */
  --fs-base:    14px;
  --fs-lead:    16px;
  --fs-h5:      18px;
  --fs-h4:      22px;
  --fs-h3:      28px;
  --fs-h2:      36px;
  --fs-h1:      48px;
  --fs-display: 64px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-snug:    1.3;
  --lh-body:    1.5;
  --lh-relaxed: 1.65;

  /* Tracking */
  --tr-display: -0.03em;
  --tr-heading: -0.02em;
  --tr-body:     0em;
  --tr-mono:     0em;
  --tr-caps:     0.18em;

  /* ======================================================================
     SPACING & RADII
     ====================================================================== */

  --space-0:  0;
  --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;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;   /* default card */
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ======================================================================
     ELEVATION — cockpit is mostly flat, glow is the elevation language
     ====================================================================== */

  --shadow-sm:    0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:    0 1px 0 0 rgba(255, 255, 255, 0.08) inset, 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);

  /* Elevation surface colors — each tier changes bg too, not just shadow */
  --elev-sm-bg: var(--ink-700);
  --elev-md-bg: var(--ink-600);
  --elev-lg-bg: var(--ink-500);

  /* Mint glow — only on live/selected elements. Use rarely. */
  --glow-mint:   0 0 0 1px rgba(108, 255, 177, 0.28), 0 0 24px rgba(108, 255, 177, 0.18);
  --glow-amber:  0 0 0 1px rgba(246, 177, 75, 0.28),  0 0 18px rgba(246, 177, 75, 0.14);
  --glow-rust:   0 0 0 1px rgba(216, 106, 75, 0.32),  0 0 18px rgba(216, 106, 75, 0.14);

  /* ======================================================================
     MOTION — only three approved patterns
     ====================================================================== */

  /* Motion rule: niets beweegt autonoom. Motion = reactie op user-actie of
     system-event. Nooit ambient decoratie. Geen "breathing", geen ambient
     pulse — dat is AI-cliche, niet operator-grade.

     The canonical five:
       1. state-swap       instant        status pills, toggles
       2. spinner          1s linear      genuinely async work
       3. panel-enter      240ms ease-out modal / drawer / sheet entry
       4. skeleton-shimmer 1.2s linear    loading placeholders only
       5. focus-ring       120ms ease-out keyboard focus on interactives
  */

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* panel-enter */
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);
  --ease-focus: cubic-bezier(0.2, 0, 0.1, 1);    /* focus-ring */
  /* Back-compat alias so existing transitions keep working */
  --ease-standard: var(--ease-out);

  --motion-swap:     0ms;
  --motion-focus:    120ms;
  --motion-panel:    240ms;
  --motion-spinner:  1000ms;
  --motion-shimmer:  1200ms;
}

/* =========================================================================
   SEMANTIC CLASSES
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display & headings */
.display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

h5, .h5 {
  font-family: var(--font-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--fg-muted);
}

/* Mono — data, IDs, agent-traces, queries */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum" on, "zero" on, "ss01" on;
  letter-spacing: var(--tr-mono);
  color: var(--fg);
}

.mono-sm { font-family: var(--font-mono); font-size: var(--fs-small); font-feature-settings: "tnum" on, "zero" on; }
.mono-xs { font-family: var(--font-mono); font-size: var(--fs-caption); font-feature-settings: "tnum" on, "zero" on; color: var(--fg-muted); }

/* Tabular figures — required in all data tables and KPI numbers */
.tabular, table, .kpi-num, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 160ms var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

/* Selection */
::selection {
  background: var(--accent-bg);
  color: var(--fg-strong);
}

/* Scrollbars — thin, cockpit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-400); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* =========================================================================
   MOTION — the three approved patterns, reusable
   ========================================================================= */

/* ---- panel-enter: 240ms ease-out, functional only (drawer/modal/sheet) */
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-enter { animation: panel-enter var(--motion-panel) var(--ease-out) both; }

/* ---- spinner: 1s linear, only during genuine async work */
@keyframes spinner {
  to { transform: rotate(360deg); }
}
.spinner { animation: spinner var(--motion-spinner) linear infinite; }

/* ---- skeleton-shimmer: 1.2s linear, loading placeholders only */
@keyframes skeleton-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--ink-700) 0%,
    var(--ink-600) 50%,
    var(--ink-700) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--motion-shimmer) linear infinite;
}

/* ---- focus-ring: 120ms ease-out, only on keyboard focus */
.focus-ring:focus-visible {
  outline: 2px solid var(--mint-500);
  outline-offset: 2px;
  transition: outline-offset var(--motion-focus) var(--ease-focus);
}

/* ---- Deprecated. Will be removed. Keep as no-op during migration. */
.signal-pulse, .ontology-breathe { animation: none; }
.cockpit-reveal { animation: panel-enter var(--motion-panel) var(--ease-out) both; }