/* SiteFlow Design System — Colors & Typography
 * Source: BRAND-02 UI Guidelines v1.0 (18.04.2026)
 * Philosophy: "Souveräne Klarheit" / Utilitarian Neo-Brutalismus
 */

/* Webfonts — Space Grotesk locally hosted (brand-supplied);
 * Inter & JetBrains Mono via Google Fonts (no brand files supplied for these).
 */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── COLOR TOKENS ────────────────────────────────────────────── */

  /* Primary palette */
  --industrial-ink:   #1C1E21;  /* Lines, frames, primary text. RAL 7021 */
  --siteflow-canvas:  #FDFBF7;  /* Primary background. RAL 9001 cream */
  --energy-accent:    #C84B31;  /* CTAs only + logo slash. RAL 2001 */
  --concrete-gray:    #F4F4F5;  /* Inactive UI, table backgrounds */

  /* Semantic feedback (system colors) */
  --system-green:     #22C55E;  /* Battery full, network OK */
  --system-red:       #EF4444;  /* Error, offline, warning */
  --system-amber:     #F59E0B;  /* Cached/stale data (yellow connection dot) */

  /* Tonal extensions (derived; for portal density) */
  --ink-80:  #4A4D52;
  --ink-60:  #797C82;
  --ink-40:  #A8AAAF;
  --ink-20:  #D6D8DB;
  --ink-10:  #E8E9EB;
  --canvas-shade: #F7F4EE;  /* Slight tint of canvas for striped tables */

  /* Semantic foreground/background aliases */
  --fg-1: var(--industrial-ink);
  --fg-2: var(--ink-80);
  --fg-3: var(--ink-60);
  --fg-inverse: var(--siteflow-canvas);
  --bg-1: var(--siteflow-canvas);
  --bg-2: var(--concrete-gray);
  --bg-inverse: var(--industrial-ink);
  --border: var(--industrial-ink);
  --border-subtle: var(--ink-20);

  /* ── TYPE FAMILIES ───────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── TYPE SCALE (per BRAND-02 §3) ────────────────────────────── */
  --h1-size: 64px;       --h1-mobile: 48px;  --h1-lh: 1.1;  --h1-tracking: -0.02em;
  --h2-size: 40px;                            --h2-lh: 1.2;  --h2-tracking: -0.01em;
  --h3-size: 24px;                            --h3-lh: 1.3;  --h3-tracking: 0em;
  --body-size: 16px;                          --body-lh: 1.5;
  --label-size: 14px;                         --label-lh: 1.0;
  --mono-size: 14px;                          --mono-lh: 1.4;
  --micro-size: 12px;                         --micro-lh: 1.3;

  /* ── LAYOUT PRIMITIVES ───────────────────────────────────────── */
  --grid-cols: 12;
  --gutter: 24px;

  /* Borders — harte Rahmen */
  --border-w: 2px;
  --border-w-hero: 4px;
  --border-style: solid;

  /* Border-Radius — sharp by default; micro-rounding only on interactive */
  --radius-base: 0px;
  --radius-interactive: 2px;

  /* Spacing (8pt scale) */
  --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;

  /* Solid Shadows (no blur — hard offset only) */
  --shadow-sm: 2px 2px 0 0 var(--industrial-ink);
  --shadow-md: 4px 4px 0 0 var(--industrial-ink);
  --shadow-lg: 6px 6px 0 0 var(--industrial-ink);
  --shadow-accent: 4px 4px 0 0 var(--energy-accent);
}

/* ── SEMANTIC TYPE CLASSES ─────────────────────────────────────── */

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-tracking);
  color: var(--fg-1);
  margin: 0;
}
@media (max-width: 768px) { .h1, h1 { font-size: var(--h1-mobile); } }

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-tracking);
  color: var(--fg-1);
  margin: 0;
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-tracking);
  color: var(--fg-1);
  margin: 0;
}

.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg-1);
  margin: 0;
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--label-size);
  line-height: var(--label-lh);
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

.label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--label-size);
  line-height: var(--label-lh);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-1);
}

.mono, code, pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--mono-size);
  line-height: var(--mono-lh);
  color: var(--fg-1);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--micro-size);
  line-height: var(--micro-lh);
  color: var(--fg-2);
}

/* ── BASE RESETS ───────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── COMPONENT PRIMITIVES ──────────────────────────────────────── */

.sf-card {
  border: var(--border-w) var(--border-style) var(--border);
  background: var(--bg-1);
  padding: var(--s-5);
  border-radius: var(--radius-base);
}

.sf-card--hero {
  border-width: var(--border-w-hero);
}

.sf-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--label-size);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: var(--border-w) var(--border-style) var(--border);
  border-radius: var(--radius-interactive);
  background: var(--bg-1);
  color: var(--fg-1);
  cursor: pointer;
  transition: transform 80ms linear, box-shadow 80ms linear;
}
.sf-btn:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }
.sf-btn:active { box-shadow: none; transform: translate(0, 0); }

.sf-btn--primary {
  background: var(--energy-accent);
  color: var(--fg-inverse);
  border-color: var(--industrial-ink);
}
.sf-btn--ink {
  background: var(--industrial-ink);
  color: var(--fg-inverse);
}

.sf-input {
  font-family: var(--font-body);
  font-size: var(--body-size);
  padding: 12px 14px;
  border: var(--border-w) var(--border-style) var(--border);
  border-radius: var(--radius-interactive);
  background: var(--bg-1);
  color: var(--fg-1);
  width: 100%;
}
.sf-input:focus { outline: none; box-shadow: var(--shadow-sm); }

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: var(--border-w) var(--border-style) var(--border);
  border-radius: var(--radius-interactive);
  background: var(--bg-1);
}