/*
 wlkns-dev-standards
 Design Tokens – CSS
 Version: v1.0

 Zweck:
 Zentrale, technologieunabhängige Design-Tokens für Web-UIs.
 Dieses File ist die Single Source of Truth für Farben, Typografie
 und grundlegende Abstände.
*/

:root {
  /* =========================
     Farben – Identity
     ========================= */

  --color-primary: #1F2A37;   /* Header, Navigation, Headlines */
  --color-accent:  #0EA5A4;   /* Links, Fokus, aktive States */

  /* =========================
     Farben – Status
     ========================= */

  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #DC2626;

  /* =========================
     Farben – Neutrals (Light)
     ========================= */

  --color-bg:        #F8FAFC;
  --color-surface:   #FFFFFF;
  --color-border:    #E5E7EB;

  --color-text:          #111827;
  --color-text-muted:   #4B5563;

  /* =========================
     Typografie
     ========================= */

  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', sans-serif;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */

  --line-height-tight: 1.3;
  --line-height-base:  1.6;

  /* =========================
     Spacing (8px Grid)
     ========================= */

  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */

  /* =========================
     Radius & Effects
     ========================= */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
}

/* =========================
   Base Styles (optional)
   ========================= */

body {
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}