/* ============================================================
   Zoonotic Design System — Foundations
   Colors + Type + a handful of raw primitives.

   Import Google Fonts (Saira Condensed, IBM Plex Sans, IBM Plex Mono)
   from the HTML head. Local fallbacks are declared inside fonts/
   for environments that need them.
   ============================================================ */

:root {
  /* ========== BRAND ==========
     Sampled from the Zoonotic logo JPEG.
     Forest green + deep ink. Industrial, grounded, not decorative. */
  --zn-green-900: #042716;   /* shadow / deepest */
  --zn-green-800: #0A3E1E;
  --zn-green-700: #0A5A2A;   /* PRIMARY brand green (sampled) */
  --zn-green-600: #1A7A3E;
  --zn-green-500: #2E9A54;
  --zn-green-300: #8FC9A3;   /* tints only — used sparingly */
  --zn-green-100: #E6F2EA;

  --zn-ink-900:   #0E0E0E;   /* near black — secondary brand ink */
  --zn-ink-800:   #1B1B1B;
  --zn-ink-700:   #282828;   /* charcoal (sampled) */
  --zn-ink-600:   #3A3A3A;
  --zn-ink-500:   #5A5A5A;
  --zn-ink-400:   #7A7A7A;
  --zn-ink-300:   #A6A6A6;
  --zn-ink-200:   #CFCFCF;
  --zn-ink-100:   #E6E6E6;
  --zn-ink-50:    #F2F2F2;

  --zn-bone:      #F8F8F8;   /* page background (sampled) */
  --zn-white:     #FFFFFF;

  /* Accent — muted amber used only for engineering indicators (hazard,
     in-progress). Kept restrained; NEVER used as a decorative accent. */
  --zn-amber-600: #B8770F;
  --zn-amber-500: #D9921C;
  --zn-amber-100: #FBEBCC;

  /* Status */
  --zn-ok:        var(--zn-green-600);
  --zn-warn:      var(--zn-amber-500);
  --zn-error:     #B4281E;   /* muted brick red — not fire-engine */
  --zn-info:      #1F5A8F;   /* deep blue — used only in data viz */

  /* ========== SEMANTIC (LIGHT, DEFAULT) ========== */
  --bg:           var(--zn-bone);
  --bg-elevated: var(--zn-white);
  --bg-sunken:   #EFEFEF;
  --bg-inverse:  var(--zn-ink-900);

  --fg-1:        var(--zn-ink-900); /* primary text */
  --fg-2:        var(--zn-ink-700); /* secondary */
  --fg-3:        var(--zn-ink-500); /* tertiary / meta */
  --fg-4:        var(--zn-ink-400); /* placeholder */
  --fg-inverse:  var(--zn-bone);
  --fg-brand:    var(--zn-green-700);
  --fg-link:     var(--zn-green-700);

  --border-1:    var(--zn-ink-200);  /* hairline */
  --border-2:    var(--zn-ink-700);  /* strong rule */
  --border-brand:var(--zn-green-700);

  /* ========== TYPOGRAPHY ==========
     Display : Saira Condensed     — industrial, engineered, echoes the wordmark
     Body    : IBM Plex Sans       — technical but humane, excellent Spanish support
     Mono    : IBM Plex Mono       — specs, dimensions, codes, data tables */
  --font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-sans:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular ratio 1.250 (major third). Rounded. */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.20;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Tracking (letter-spacing). The wordmark uses generous spacing;
     we echo this on display type and all-caps eyebrows. */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.14em;   /* eyebrows, section labels */
  --ls-widest: 0.22em;   /* hero wordmark-style labels */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ========== SPACING (4px base) ========== */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ========== RADII ========== */
  /* Zoonotic is geometric and right-angled. Radii are minimal by design. */
  --r-0: 0;
  --r-1: 2px;   /* inputs, buttons — a whisper */
  --r-2: 4px;   /* cards */
  --r-pill: 999px;

  /* ========== BORDERS ========== */
  --bw-hair:   1px;
  --bw-rule:   2px;
  --bw-heavy:  3px;

  /* ========== SHADOWS ==========
     Subtle, technical. Closer to architectural drawings than UI chrome. */
  --sh-0: none;
  --sh-1: 0 1px 0 rgba(10, 14, 10, 0.06);
  --sh-2: 0 2px 4px rgba(10, 14, 10, 0.06), 0 1px 2px rgba(10, 14, 10, 0.04);
  --sh-3: 0 6px 16px rgba(10, 14, 10, 0.08), 0 2px 4px rgba(10, 14, 10, 0.04);
  --sh-inset-rule: inset 0 -1px 0 var(--border-1);

  /* ========== MOTION ==========
     Restrained. Short, linear-ish. No bounces. Engineering, not entertainment. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;

  /* ========== LAYOUT ========== */
  --container-max: 1280px;
  --gutter:        var(--sp-6);
}

/* Dark scheme — used for hero sections, presentation, technical dashboards. */
[data-theme="dark"],
.zn-on-dark {
  --bg:          var(--zn-ink-900);
  --bg-elevated: var(--zn-ink-800);
  --bg-sunken:   #050505;
  --fg-1:        var(--zn-bone);
  --fg-2:        var(--zn-ink-200);
  --fg-3:        var(--zn-ink-300);
  --fg-4:        var(--zn-ink-400);
  --fg-brand:    var(--zn-green-500);
  --fg-link:     var(--zn-green-300);
  --border-1:    #2B2B2B;
  --border-2:    var(--zn-ink-200);
  --border-brand:var(--zn-green-500);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these, not the tokens directly, in most places.
   ============================================================ */

.zn-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.zn-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}

.zn-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}

.zn-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.zn-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.zn-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.zn-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.zn-p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}

.zn-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.zn-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.zn-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

.zn-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  border: var(--bw-hair) solid var(--border-1);
  padding: 1px 6px;
  border-radius: var(--r-1);
  color: var(--fg-1);
}

/* "Engineering label" — like a drawing callout: monospace number + caps label.
   Useful for data-viz, stat blocks, spec sheets. */
.zn-spec {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.zn-stat {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Link */
.zn-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.zn-link:hover { color: var(--zn-green-800); text-decoration-thickness: 2px; }

/* Number display — always tabular for tables, KPIs, timelines */
.zn-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}