/*
 * Design Tokens — Thomas Ogur One-Pager
 *
 * STATUS: Erstvorschlag (2026-05-13). Hex-Werte sind noch nicht final
 * mit Kenneth abgestimmt. Bitte vor erstem Sektionsbau bestaetigen oder anpassen.
 *
 * Briefing-Vorgabe:
 *   Primaer:   dunkelblau (Bosch-inspiriert)
 *   Sekundaer: gruen, anthrazit / dunkelgrau
 *   Verworfen: rot, gelb
 *
 * Regel fuer alle CSS-Dateien dieses Projekts:
 *   - KEINE Hex-Werte ausserhalb dieser Datei
 *   - KEINE px/rem-Werte ausserhalb der Spacing-/Typo-Skala unten
 *   - Wenn ein Token fehlt: lieber hier ergaenzen als improvisieren
 */

:root {
  /* ---------- FARBE ---------- */

  /* Primaer: tiefes Industrie-Blau, mehrere Stufen fuer Hintergrund/Text */
  --color-primary-950: #061326;   /* fast schwarz, fuer sehr dunkle Hintergruende */
  --color-primary-900: #0A1F44;   /* Hauptdunkelblau (Hero-BG, dunkle Flaechen) */
  --color-primary-800: #0E2B5E;
  --color-primary-700: #163A7C;
  --color-primary-500: #2A5BAA;   /* fuer Links, Hover */

  /* Akzent Gruen: gedeckt, industrial — KEIN Neon, kein Frischgruen.
     700 = tief, fuer Buttons auf hellem BG.
     500 = mid, fuer Hover/Text auf hellem BG.
     400 = vivider Mitton, fuer Buttons auf dunklem BG (genug Kontrast).
     300 = heller, fuer Text-Highlights auf dunklem BG. */
  --color-accent-700: #1F5E3A;
  --color-accent-500: #2D7A45;
  --color-accent-400: #3F9656;
  --color-accent-300: #6BB582;

  /* Anthrazit / Neutralfarben: warmer Schwarzbereich */
  --color-anthracite-950: #14171C;
  --color-anthracite-900: #1F2329;
  --color-anthracite-700: #2A2D34;
  --color-anthracite-500: #4A4F58;
  --color-anthracite-300: #8A8F98;

  /* "Papier" — warmes Cream, deutlich waermer als Off-White
     (gibt Naehe, vermeidet Klinik-Look, traegt grosse Typo gut) */
  --color-paper: #F2ECDD;
  --color-paper-bright: #F7F2E5;
  --color-white: #FFFFFF;          /* sparsam einsetzen */

  /* Semantische Aliase — bevorzugt verwenden, nicht die Skalen direkt */
  --color-bg: var(--color-paper);
  --color-bg-dark: var(--color-primary-900);
  --color-text: var(--color-anthracite-900);
  --color-text-muted: var(--color-anthracite-500);
  --color-text-on-dark: var(--color-paper-bright);
  --color-link: var(--color-primary-700);
  --color-accent: var(--color-accent-700);
  --color-rule: var(--color-anthracite-300);

  /* ---------- TYPOGRAFIE ---------- */

  /* Schriftstack: Inter als ruhiger Industrie-Sans, system-Fallback.
     Wenn wir spaeter eine bezahlte Schrift wollen (Söhne, Neue Haas Grotesk,
     ABC Whyte) — hier eintauschen, sonst nichts aendern. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  /* Modulare Skala (Faktor 1.25 — ruhig, ohne Hierarchie-Drama) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.25rem;   /* 20 */
  --text-lg:   1.5625rem; /* 25 */
  --text-xl:   1.953rem;  /* 31 */
  --text-2xl:  2.441rem;  /* 39 */
  --text-3xl:  3.052rem;  /* 49 */
  --text-4xl:  3.815rem;  /* 61 */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* fuer Eyebrows / Kapitaelchen */

  /* ---------- SPACING (8er-Raster) ---------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ---------- LAYOUT ---------- */
  --measure: 65ch;            /* max. Lesebreite Fliesstext */
  --content-max: 1200px;      /* aeussere Container-Breite */
  --content-narrow: 720px;    /* schmale Sektionen (Manifest, Zitat) */

  /* ---------- LINIEN, RADIEN, SCHATTEN ---------- */
  --border-thin:  1px solid var(--color-rule);
  --border-strong: 2px solid var(--color-anthracite-900);

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 18px;       /* fuer Bilder, Karten — weicher Rahmen statt Kasten */
  --radius-pill: 9999px;   /* fuer CTA-Buttons und Pill-Navigation */

  /* Schatten sparsam, niemals soft-purple-glow.
     Wenn Schatten, dann hart und dunkel. */
  --shadow-sm: 0 1px 0 rgba(20, 23, 28, 0.06);
  --shadow-md: 0 6px 18px rgba(20, 23, 28, 0.08);
}