/* Nachtly — Design Tokens
 * v0.1 — Mai 2026
 * Calm-premium clinical system for dental inventory management.
 */

:root {
  /* ── Surface ───────────────────────────────────────────── */
  --porcelain:   #F3F6F6;   /* primary canvas */
  --porcelain-2: #E8EEEE;   /* recessed canvas */
  --paper:       #FFFFFF;   /* card surface */
  --hairline:    #DDE4E4;   /* 1px rules */
  --hairline-2:  #C7D1D1;   /* stronger rule */

  /* ── Ink ───────────────────────────────────────────────── */
  --ink:         #0E1E1F;   /* primary text — near-black with teal cast */
  --ink-2:       #2E3F40;   /* secondary text */
  --ink-3:       #5E7374;   /* tertiary / labels */
  --ink-4:       #92A5A6;   /* placeholders, captions */

  /* ── Brand (from real Nachtly identity) ──────────────────── */
  --klinik:      #004346;   /* Nachtly Deep — primary */
  --klinik-deep: #002C2E;   /* hover / active */
  --klinik-soft: #D4E0E0;   /* tinted backgrounds */
  --dental:      #2BB3A6;   /* Nachtly Teal — accent / mark color */
  --dental-soft: #D6F0EC;
  --enamel:      #E2EDED;   /* tonal surface */
  --night:       #0A1A2E;   /* deep night navy (background art) */

  /* ── Functional ────────────────────────────────────────── */
  --critical:    #B23A48;   /* abgelaufen, kritisch leer */
  --critical-soft:#F6E2E5;
  --warn:        #C58940;   /* niedrig, läuft bald ab */
  --warn-soft:   #F8ECDC;
  --ok:          #2F7D5B;   /* auf Lager, einsatzbereit */
  --ok-soft:     #DEEDE5;

  /* ── Type ──────────────────────────────────────────────── */
  --serif:  "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --serif-weight: 400;
  --sans:   "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:   "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ── Elevation (used sparingly) ────────────────────────── */
  --shadow-1: 0 1px 0 rgba(11,90,122,0.04), 0 1px 2px rgba(11,90,122,0.06);
  --shadow-2: 0 1px 0 rgba(11,90,122,0.04), 0 4px 16px rgba(11,90,122,0.08);
  --shadow-3: 0 8px 32px rgba(11,90,122,0.12);

  /* ── Spacing scale (8px base, half-steps allowed) ─────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Density (driven by Tweaks) ───────────────────────── */
  --density: 1;            /* 0.85 compact · 1 comfortable · 1.15 roomy */
  --pad-sm: calc(8px * var(--density));
  --pad-md: calc(14px * var(--density));
  --pad-lg: calc(20px * var(--density));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--klinik); color: var(--paper); }