/* ==========================================================================
   Fauna Design System — Core Tokens
   Colors + Typography, light & dark, per-module accents, element reset.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&display=swap');

/* -----------------------------------------------------------
   Typography — Inter Tight (body/UI) + JetBrains Mono (data)
   + Fraunces (display serif, h1 only)
   Inter Tight = humanist sans with tight default tracking,
   reads as engineered but not cold; JetBrains Mono keeps
   measurement data (RPE, RISO, slot numbers) aligned.
   Display headings use the same Inter Tight at heavier
   weights — no display serif. The brand feels like a tool,
   not a magazine.
   ----------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* === Neutrals — warm-ish greys, not pure blacks ======= */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafaf9;   /* page bg */
  --neutral-50:  #f5f5f4;   /* subtle bg */
  --neutral-100: #eeeeec;   /* hover bg, dividers */
  --neutral-200: #e2e2df;   /* borders */
  --neutral-300: #c8c8c4;   /* disabled border */
  --neutral-400: #9a9a95;   /* muted icon */
  --neutral-500: #6d6d68;   /* fg-muted */
  --neutral-600: #4c4c48;   /* fg-secondary */
  --neutral-700: #353532;   /* fg-primary on light bg elements */
  --neutral-800: #1f1f1d;   /* fg-primary */
  --neutral-900: #0f0f0e;   /* fg-max */

  /* === Module accents (brand signature colors) =========== */
  /* Orca — deep marine. Electrical testing, serious, stable. */
  --orca-50:  #eef3ff;
  --orca-100: #dbe5ff;
  --orca-200: #b8c8ff;
  --orca-300: #8ba4ff;
  --orca-400: #5d7cf0;
  --orca-500: #3957d9;    /* primary */
  --orca-600: #2740b8;
  --orca-700: #1e40af;    /* matches legacy code */
  --orca-800: #16307f;
  --orca-900: #0f2258;

  /* Lynx — warm amber. Ladder checks, field work, outdoors. */
  --lynx-50:  #fef6ec;
  --lynx-100: #fce6c7;
  --lynx-200: #f9cf8c;
  --lynx-300: #f4b04f;
  --lynx-400: #ec9326;
  --lynx-500: #d97706;    /* primary, matches legacy code */
  --lynx-600: #b75f03;
  --lynx-700: #8f4a06;
  --lynx-800: #65350a;
  --lynx-900: #3d2008;

  /* Elephas — first-aid red. Verbandskasten, signage red. Tuned slightly
     toward the rose end so it doesn't collide with --danger-500 in flash
     errors and destructive buttons (which is a punchier, oranger red). */
  --elephas-50:  #fdecec;
  --elephas-100: #fbd0d0;
  --elephas-200: #f5a3a3;
  --elephas-300: #ec6f6f;
  --elephas-400: #e14848;
  --elephas-500: #dc2626;    /* primary */
  --elephas-600: #b81b1b;
  --elephas-700: #911414;
  --elephas-800: #631010;
  --elephas-900: #3a0a0a;

  /* Bombus — fire-safety orange. Brand- und Rauchschutztüren. */
  --bombus-50:  #fff1e6;
  --bombus-100: #ffd9b8;
  --bombus-200: #ffb27a;
  --bombus-300: #fb8a3c;
  --bombus-400: #f06f1b;
  --bombus-500: #ea580c;    /* primary */
  --bombus-600: #c44608;
  --bombus-700: #9a3506;
  --bombus-800: #6a2404;
  --bombus-900: #3f1502;

  /* Tarandus — cool teal. Kühltemperatur-Überwachung, cold storage. */
  --tarandus-50:  #e6f8f5;
  --tarandus-100: #b8ece2;
  --tarandus-200: #7fdac8;
  --tarandus-300: #3fc1ab;
  --tarandus-400: #14a58c;
  --tarandus-500: #0d9488;    /* primary */
  --tarandus-600: #0a7a70;
  --tarandus-700: #0a5d56;
  --tarandus-800: #073f3a;
  --tarandus-900: #03221f;

  /* Panthera — violet. Touren, Stationen, Aufgaben. */
  --panthera-50:  #f3effe;
  --panthera-100: #e3d9fc;
  --panthera-200: #c8b4f8;
  --panthera-300: #a888f2;
  --panthera-400: #8f63ec;
  --panthera-500: #7c3aed;    /* primary */
  --panthera-600: #6b27d4;
  --panthera-700: #571eaa;
  --panthera-800: #3d1577;
  --panthera-900: #220b44;

  /* === Semantic status ================================== */
  --success-50:  #e8f5ec;
  --success-500: #1a9b42;
  --success-600: #0f7a32;
  --success-700: #0b5a25;

  --warning-50:  #fff7e0;
  --warning-500: #d69400;
  --warning-600: #a76f00;
  --warning-700: #7a5100;

  --danger-50:  #fdecec;
  --danger-500: #d63838;
  --danger-600: #b22626;
  --danger-700: #851717;

  --info-50:  #e7f4fb;
  --info-500: #0284c7;
  --info-600: #026aa1;

  /* Manual-check-failed status (active asset, latest check failed). */
  --fail-50:  #f5ecfa;
  --fail-500: #8e44ad;
  --fail-600: #6f2f8a;
  --fail-700: #4f1f64;

  /* === Semantic aliases (USE THESE in UI) =============== */
  --bg-page:       var(--neutral-25);
  --bg-surface:    var(--neutral-0);
  --bg-raised:     var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-hover:      var(--neutral-100);
  --bg-active:     var(--neutral-200);

  --fg-default:    var(--neutral-800);
  --fg-muted:      var(--neutral-500);
  --fg-subtle:     var(--neutral-400);
  --fg-on-accent:  var(--neutral-0);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);

  /* Accent — re-aliased per module at the body level. */
  --accent-50:   var(--orca-50);
  --accent-100:  var(--orca-100);
  --accent-300:  var(--orca-300);
  --accent-500:  var(--orca-500);
  --accent-600:  var(--orca-600);
  --accent-700:  var(--orca-700);
  --accent-900:  var(--orca-900);
  --accent:      var(--accent-500);
  --accent-fg:   var(--neutral-0);

  /* === Spacing (4px base) =============================== */
  --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;

  /* === Radii =========================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* === Elevation ======================================= */
  --shadow-xs: 0 1px 1px rgba(15, 15, 14, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 15, 14, 0.06), 0 1px 3px rgba(15, 15, 14, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 15, 14, 0.06), 0 4px 12px rgba(15, 15, 14, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 15, 14, 0.08), 0 2px 6px rgba(15, 15, 14, 0.04);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* === Type ============================================ */
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Fraunces", "Iowan Old Style", "Source Serif Pro", Georgia, serif;

  /* Scale — utilitarian, dense. 14px base for UI,
     16px for comfortable long-form, 12px for metadata. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* === Nav shell =========================================
     Sidebar (desktop/tablet) is intentionally dark so the
     accent-themed module tabs pop against it. The rail stays
     the same width regardless of module. ----------------- */
  --sidebar-bg:         #1f1f1d;
  --sidebar-bg-hover:   #2a2a28;
  --sidebar-bg-active:  #353532;
  --sidebar-fg:         #c8c8c4;
  --sidebar-fg-muted:   #6d6d68;
  --sidebar-fg-strong:  #ffffff;
  --sidebar-border:     #353532;
  --sidebar-width:      200px;
  --sidebar-width-rail: 56px;
  --mobile-tabbar-h:    60px;
  --topbar-h:           44px;

  /* === Motion ========================================== */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
}

/* === Dark theme — near-black with slight cool undertone === */
[data-theme="dark"] {
  --neutral-0:   #0c0c0e;
  --neutral-25:  #111113;
  --neutral-50:  #18181b;
  --neutral-100: #222226;
  --neutral-200: #2d2d33;
  --neutral-300: #3a3a42;
  --neutral-400: #6a6a72;
  --neutral-500: #9a9aa2;
  --neutral-600: #c2c2c8;
  --neutral-700: #d8d8dc;
  --neutral-800: #eaeaee;
  --neutral-900: #ffffff;

  --orca-50:  #0f1a3d;
  --orca-100: #16245a;
  --orca-500: #5d7cf0;
  --orca-600: #7a94f3;
  --orca-700: #97abf5;

  --lynx-50:  #2a1a05;
  --lynx-100: #3d2608;
  --lynx-500: #ec9326;
  --lynx-600: #f4b04f;
  --lynx-700: #f9cf8c;

  --elephas-50:  #2e0e0e;
  --elephas-100: #3f1414;
  --elephas-500: #f05656;
  --elephas-600: #f57979;
  --elephas-700: #fa9f9f;

  --bombus-50:  #2e1605;
  --bombus-100: #3f1f06;
  --bombus-500: #fb8a3c;
  --bombus-600: #fda35e;
  --bombus-700: #ffbb83;

  --tarandus-50:  #06241f;
  --tarandus-100: #0a3a32;
  --tarandus-500: #2dd4bf;
  --tarandus-600: #5be3d3;
  --tarandus-700: #8aede1;

  --panthera-50:  #1c1233;
  --panthera-100: #271847;
  --panthera-500: #9d6bf5;
  --panthera-600: #b48ef8;
  --panthera-700: #cbb2fb;

  --success-50: #0d2a17;
  --success-500: #34d058;

  --warning-50: #2e2405;
  --warning-500: #f0c040;

  --danger-50: #2e0f0f;
  --danger-500: #f85149;

  --info-50: #082030;
  --info-500: #38bdf8;

  --fail-50:  #2a163a;
  --fail-500: #b07cd6;
  --fail-600: #c89ce3;
  --fail-700: #dec0ee;

  --bg-page:    var(--neutral-0);
  --bg-surface: var(--neutral-25);
  --bg-raised:  var(--neutral-50);
  --bg-subtle:  var(--neutral-50);
  --bg-hover:   var(--neutral-100);
  --bg-active:  var(--neutral-200);

  --fg-default: var(--neutral-800);
  --fg-muted:   var(--neutral-500);
  --fg-subtle:  var(--neutral-400);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* === Per-module accent switching ======================== */
[data-module="orca"] {
  --accent-50:  var(--orca-50);
  --accent-100: var(--orca-100);
  --accent-300: var(--orca-300);
  --accent-500: var(--orca-500);
  --accent-600: var(--orca-600);
  --accent-700: var(--orca-700);
  --accent-900: var(--orca-900);
  --accent:     var(--orca-500);
}
[data-module="lynx"] {
  --accent-50:  var(--lynx-50);
  --accent-100: var(--lynx-100);
  --accent-300: var(--lynx-300);
  --accent-500: var(--lynx-500);
  --accent-600: var(--lynx-600);
  --accent-700: var(--lynx-700);
  --accent-900: var(--lynx-900);
  --accent:     var(--lynx-500);
}
[data-module="elephas"] {
  --accent-50:  var(--elephas-50);
  --accent-100: var(--elephas-100);
  --accent-300: var(--elephas-300);
  --accent-500: var(--elephas-500);
  --accent-600: var(--elephas-600);
  --accent-700: var(--elephas-700);
  --accent-900: var(--elephas-900);
  --accent:     var(--elephas-500);
}
[data-module="bombus"] {
  --accent-50:  var(--bombus-50);
  --accent-100: var(--bombus-100);
  --accent-300: var(--bombus-300);
  --accent-500: var(--bombus-500);
  --accent-600: var(--bombus-600);
  --accent-700: var(--bombus-700);
  --accent-900: var(--bombus-900);
  --accent:     var(--bombus-500);
}
[data-module="tarandus"] {
  --accent-50:  var(--tarandus-50);
  --accent-100: var(--tarandus-100);
  --accent-300: var(--tarandus-300);
  --accent-500: var(--tarandus-500);
  --accent-600: var(--tarandus-600);
  --accent-700: var(--tarandus-700);
  --accent-900: var(--tarandus-900);
  --accent:     var(--tarandus-500);
}
[data-module="panthera"] {
  --accent-50:  var(--panthera-50);
  --accent-100: var(--panthera-100);
  --accent-300: var(--panthera-300);
  --accent-500: var(--panthera-500);
  --accent-600: var(--panthera-600);
  --accent-700: var(--panthera-700);
  --accent-900: var(--panthera-900);
  --accent:     var(--panthera-500);
}

/* === Element reset ====================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* === Typography base + semantic classes ================= */
body, .fauna-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-optical-sizing: auto;
}
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 600;
  font-optical-sizing: auto;
}
/* Italic accent word inside h1 — for highlighting a verb or key term.
   Usage: <h1>Prüfen <em>fällig</em></h1>  */
h1 em, .h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent, var(--fg-default));
}
.h2, h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
.h3, h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
}
.h4, h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 600;
}
.h5, h5 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: 600;
}

.body-lg    { font-size: var(--text-md); line-height: var(--leading-loose); }
.body       { font-size: var(--text-base); line-height: var(--leading-normal); }
.body-sm    { font-size: var(--text-sm); line-height: var(--leading-normal); }
.caption    { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-muted); }
.eyebrow    {
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-muted);
}
.label      {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mono       { font-family: var(--font-mono); font-size: var(--text-sm); }
.data       { font-family: var(--font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.numeric    { font-variant-numeric: tabular-nums; }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

hr, .divider {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-6) 0;
}