/* ============================================================================
   s.host — design tokens

   Letterlijke kopie van de zes bestanden uit `tokens/` van het s.host Design
   System (gemaakt met Claude Design, 2026-08-17), in de volgorde die
   `styles.css` daar aanhoudt. Eén bestand in plaats van zes @imports, omdat
   CSS-imports serieel laden.

   Alles tot aan "TAGTOOL — TOEVOEGINGEN" onderaan is overgenomen en hoort niet
   met de hand aangepast te worden. Een nieuwe ronde uit Claude Design vervangt
   dat hele stuk; wat wij eraan toevoegen staat eronder en blijft dan staan.

   Geen afwijking boven die grens: de vier @font-face-regels die `fonts.css`
   vervangen (zie fonts/README.md voor waarom er geen Google Fonts @import
   in zit) staan onder de "TAGTOOL — TOEVOEGINGEN"-kop, samen met de rest van
   wat wij toevoegen. Een hersync uit Claude Design mag dus alles boven die
   kop zonder voorbehoud vervangen.
   ============================================================================ */

/* ============ s.host COLOR TOKENS ============
   Sampled from the product dashboard. Base ramps first, semantic aliases below. */
:root {
  /* --- Ink / near-black (sidebar, primary text) --- */
  --ink-900: #020907;   /* sidebar background, deepest surface */
  --ink-800: #0a120f;   /* strongest text */
  --ink-700: #14211d;   /* raised dark surface */

  /* --- Brand lime (primary accent, CTA, active nav) --- */
  --lime-300: #dcf79a;  /* light lime tint */
  --lime-400: #d0f47f;
  --lime-500: #c8f265;  /* PRIMARY brand lime */
  --lime-600: #b6e650;  /* hover / pressed lime */
  --lime-700: #a4d63c;

  /* --- Green (data viz, selected states, secondary) --- */
  --green-900: #041f1a;  /* deepest teal-green (active tab, on-dark fills) */
  --green-800: #143d34;  /* data accent: rings, chart lines, KPIs */
  --green-700: #243d38;  /* selected list-row background */
  --green-500: #37514d;
  --green-200: #cfe0d9;  /* soft green tint */
  --green-100: #e7f0ec;  /* faint green wash */

  /* --- Neutrals / surfaces --- */
  --white: #ffffff;
  --surface-list: #fbfcfb;  /* middle list column */
  --chip-100: #ecefec;      /* chip / muted pill background */
  --backdrop: #c4cac1;      /* sage desktop canvas behind the app */
  --line-100: #eef1ee;      /* faint hairline */
  --line-200: #e2e7e2;      /* default hairline border */
  --line-300: #d5dbd5;      /* stronger divider */

  /* --- Gray text ramp --- */
  --gray-900: #0a120f;
  --gray-700: #303a36;
  --gray-500: #8b938d;   /* muted labels, IPs */
  --gray-400: #a7ada8;   /* axis / de-emphasized numbers */
  --gray-300: #c3c8c3;

  /* --- Semantic --- */
  --danger-500: #fd464f;   /* notification badge, destructive */
  --danger-050: #ffe6e7;

  /* ============ SEMANTIC ALIASES ============ */
  --color-accent: var(--lime-500);
  --color-accent-hover: var(--lime-600);
  --color-accent-ink: var(--ink-900);      /* text on lime */
  --color-data: var(--green-800);          /* charts, rings, KPIs */

  --surface-app: var(--backdrop);
  --surface-canvas: var(--white);
  --surface-panel: var(--surface-list);
  --surface-sidebar: var(--ink-900);
  --surface-selected: var(--green-700);
  --surface-chip: var(--chip-100);

  --text-strong: var(--ink-800);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-inverse: var(--white);
  --text-on-accent: var(--ink-900);

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

  --focus-ring: var(--green-800);
}

/* ============ s.host TYPOGRAPHY TOKENS ============ */
:root {
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif; /* wordmark, big metrics */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* UI + body */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px). UI is compact; metrics are large. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;   /* section heading (e.g. "Active servers") */
  --fs-2xl: 30px;
  --fs-3xl: 40px;  /* hero metric (e.g. "67%") */

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  --lh-tight: 1.1; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-normal: 1.45; /* @kind font */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;  /* uppercase button / label letterspacing */

  /* Semantic roles */
  --text-wordmark-family: var(--font-display);
  --text-heading-family: var(--font-sans);
  --text-metric-family: var(--font-display);
  --text-body-family: var(--font-sans);
}

/* ============ s.host SPACING TOKENS (4px base grid) ============ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Semantic */
  --pad-chip: 4px 10px;
  --pad-button: 12px 18px;
  --pad-nav-item: 14px 20px;
  --pad-card: 24px;
  --pad-list-row: 18px 24px;

  --gap-inline: 8px;
  --gap-stack: 16px;
  --gap-section: 32px;

  --sidebar-width: 264px;
  --list-col-width: 340px;
}

/* ============ s.host RADII TOKENS ============
   The product favours crisp, near-square corners. Pills for chips only. */
:root {
  --radius-none: 0;
  --radius-xs: 3px;    /* chips, small inputs, buttons */
  --radius-sm: 6px;    /* cards, panels */
  --radius-md: 10px;
  --radius-pill: 999px; /* avatars, circular badges, count bubbles */

  --radius-button: var(--radius-xs);
  --radius-card: var(--radius-sm);
  --radius-chip: var(--radius-xs);
}

/* ============ s.host SHADOW / ELEVATION TOKENS ============
   Elevation is expressed mostly through hairline borders and flat panels;
   shadows are soft and low. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(4, 31, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(4, 31, 26, 0.06), 0 1px 2px rgba(4, 31, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(4, 31, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(4, 31, 26, 0.14);
  --shadow-window: 0 24px 60px rgba(20, 33, 29, 0.28);

  --border-hairline: 1px solid var(--border-default);
}

/* ============================================================================
   TAGTOOL — TOEVOEGINGEN

   Alles hierboven is overgenomen. Dit is wat tagtool erbij nodig heeft, met
   per stuk de reden. Bij een nieuwe ronde uit Claude Design blijft dit blok
   staan en gaat de rest eroverheen.
   ============================================================================ */

/* --- fonts (vervangt tokens/fonts.css) ---
   `fonts.css` doet daar een @import naar Google Fonts. Dat gaat er niet in:
   tagtool draait op klantinfrastructuur en hoort niet bij elke paginaweergave
   een derde partij aan te spreken. Zie fonts/README.md voor herkomst en
   licentie van de vier bestanden hieronder. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Amber. Het s.host-systeem kent geen waarschuwingskleur — het dashboard
     waar het uit gesampled is, kent alleen goed, kapot en een meldingsbolletje.
     Tagtool heeft een derde toestand: "wacht op DNS" en "controleer Tag
     Manager". Zonder eigen kleur vallen die samen met "ophalen…" in hetzelfde
     grijs, en dat zijn juist de twee waar de operator naar moet kijken. Ze
     rood maken is erger: een hostname van tien minuten oud ziet er dan uit
     als een storing. */
  --amber-100: #f7edd8;   /* vlak */
  --amber-500: #c08a1e;   /* stip */
  --amber-700: #7a5310;   /* tekst — 5.9:1 op amber-100 */

  /* --danger-500 (#fd464f) haalt op wit ongeveer 3:1. Het s.host-dashboard
     gebruikt die kleur alleen als vlak, met een wit cijfer erin, en daar is
     dat prima. Wij zetten er tekst in ("niet gezond", "geen antwoord"). */
  --danger-700: #b3121b;  /* 5.9:1 op danger-050 */

  /* `.btn.danger` staat rust op `--danger-700` (wit op deze achtergrond is
     6.96:1 — zie hierboven waarom `--danger-500` daar niet volstaat). De
     hover mag niet lichter worden dan de rust: dat zou de tekst juist onder
     de 4.5:1-eis duwen op het moment dat de cursor erop staat. Vandaar een
     eigen, donkerder rood voor hover in plaats van iets uit de bestaande
     ramp. */
  --danger-800: #860e14;  /* wit erop — 10.06:1 */

  /* De typeschaal springt van 15px naar 17px, maar de Tagtool-UI-kit zet zijn
     bodycopy, invoervelden en omschrijvingen consequent op 16. Dat gat één
     keer hier dichten is beter dan één losse 16px in app.css. */
  --fs-body: 16px;

  /* Semantische aliassen voor de statuslaag, zodat app.css nergens direct
     naar een ramp hoeft te grijpen. */
  --status-ok-bg: var(--green-100);
  --status-ok-fg: var(--green-800);
  /* Het merklime, niet het donkere groen dat hier stond (green-700, #243d38).
     Die stip moest "goed" zeggen en las als grijsgroen; dit is de kleur die de
     rail en de primaire knop ook gebruiken. Alleen de stip: de tekst en de
     achtergrond van een groene pil blijven green-800 en green-100, want lime op
     wit heeft te weinig contrast voor letters. Zie .hdot in app.css voor het
     randje dat de stip op wit zijn vorm geeft. */
  --status-ok-dot: var(--lime-500);
  --status-warn-bg: var(--amber-100);
  --status-warn-fg: var(--amber-700);
  --status-warn-dot: var(--amber-500);
  --status-err-bg: var(--danger-050);
  --status-err-fg: var(--danger-700);
  --status-err-dot: var(--danger-500);
  --status-idle-bg: var(--chip-100);
  --status-idle-fg: var(--text-body);
  --status-idle-dot: var(--gray-400);
}