/**
 * Kortschak Schriften GmbH — Design System
 * ds.css — Farben & Typografie (übernommen aus colors_and_type.css des Design-Projekts)
 * Handel Gothic BT lokal aus /fonts, JetBrains Mono via Google Fonts,
 * Apple SD Gothic Neo ist auf macOS Systemschrift (Fallback: system-ui).
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Handel Gothic BT';
  src: url('fonts/HandelGothic_BT_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* FONT FAMILIES */
  --font-display:    'Handel Gothic BT', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-sans:       'Apple SD Gothic Neo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-sans-bold:  'Apple SD Gothic Neo', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* BRAND COLORS (beide Modi) */
  --color-brand:          #FF1C20;
  --color-brand-dark:     #CC1418;
  --color-brand-fg:       #FFFFFF;
  --color-accent-orange:  #F18700;

  /* LIGHT MODE */
  --color-bg:       #FFFFFF;
  --color-surface:  #F3F3F3;
  --color-border:   #E2E2E2;
  --color-fg:       #1A1D1A;
  --color-muted:    #6B6F68;
  --color-faint:    #AEADA8;

  /* DARK-MODE-PALETTE (Referenzwerte) */
  --dark-bg:        #0d0d0b;
  --dark-bg-soft:   #141412;
  --dark-surface:   #1a1a17;
  --dark-line:      rgba(245, 244, 238, 0.08);
  --dark-line-2:    rgba(245, 244, 238, 0.16);
  --dark-ink:       #f5f4ee;
  --dark-muted:     #9a9892;
  --dark-faint:     #5b5a55;

  /* RADIUS */
  --radius-sm:     4px;
  --radius-pill:   999px;

  /* LETTER SPACING */
  --ls-label:        0.08em;
  --ls-label-lg:     0.14em;

  /* TRANSITIONS */
  --transition-base:    0.3s ease;
}

/* Dunkelmodus: Semantik-Variablen umschalten (wie .dm im Design) */
.dm {
  --color-bg:       #0d0d0b;
  --color-surface:  #1a1a17;
  --color-border:   rgba(245, 244, 238, 0.14);
  --color-fg:       #f5f4ee;
  --color-muted:    #9a9892;
  --color-faint:    #5b5a55;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-brand); color: #fff; }

a { color: var(--color-fg); }
a:hover { color: var(--color-brand); }

input, textarea, button, select { font-family: inherit; color: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--color-brand); outline-offset: -1px; }

/* Mono-Label (Design: brand-line / label) */
.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--color-muted);
}
.brand-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.brand-line::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-brand);
  flex-shrink: 0;
}