/* Design-Tokens — alle Variablen an einem Ort
   Niemals Farben, Abstände oder Größen außerhalb dieser Datei hardcoden */

:root {
  /* ------------------------------------------------------------------ */
  /* FARBEN                                                               */
  /* ------------------------------------------------------------------ */

  /* Markenfarben */
  --color-primary:        #2d5145;  /* Forest Deep — Primärfarbe */
  --color-primary-hover:  #3a6356;
  --color-primary-light:  #3d6b59;

  /* Hintergründe */
  --color-secondary:      #1a1d23;  /* Midnight Charcoal — Haupthintergrund */
  --color-alternate:      #212529;  /* Zweiter dunkler Hintergrund */
  --color-surface:        #252830;  /* Cards, erhöhte Elemente */
  --color-surface-hover:  #2d3139;

  /* Text */
  --color-fog-cream:      #f7f4ef;  /* Haupttext auf dunklem Hintergrund */
  --color-body-text:      #d4d1cc;  /* Fließtext */
  --color-muted-text:     #a8a5a0;  /* Sekundärer Text, Labels */

  /* Akzent — CTAs, Highlights */
  --color-accent:         #e8a05d;  /* Golden Hour */
  --color-accent-hover:   #d4935a;
  --color-accent-light:   rgba(232, 160, 93, 0.15);

  /* Strukturelemente */
  --color-border:         #3a3d42;  /* Trennlinien, Rahmen */
  --color-border-subtle:  #2a2d32;

  /* Status */
  --color-success:        #4caf7d;
  --color-error:          #e05c5c;
  --color-warning:        #f0b429;

  /* Overlays */
  --overlay-dark:         rgba(26, 29, 35, 0.7);
  --overlay-darker:       rgba(26, 29, 35, 0.85);

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

  /* Schriftfamilien
     TODO: Inter self-hosted via Fontsource einbinden für konsistentere Darstellung
     Aktuell: Systemfonts (DSGVO-konform, null externe Anfragen) */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
               Arial, system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Schriftgrößen (Mobile-first) */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */
  --text-7xl:  4.5rem;    /*  72px */

  /* Zeilenhöhen */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* Schriftgewichte */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ------------------------------------------------------------------ */
  /* ABSTÄNDE (8px-Basis-Grid)                                           */
  /* ------------------------------------------------------------------ */

  --space-1:   0.5rem;    /*   8px */
  --space-2:   1rem;      /*  16px */
  --space-3:   1.5rem;    /*  24px */
  --space-4:   2rem;      /*  32px */
  --space-6:   3rem;      /*  48px */
  --space-8:   4rem;      /*  64px */
  --space-12:  6rem;      /*  96px */
  --space-16:  8rem;      /* 128px */
  --space-24: 12rem;      /* 192px */

  /* ------------------------------------------------------------------ */
  /* CONTAINER & LAYOUT                                                   */
  /* ------------------------------------------------------------------ */

  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:   780px;
  --container-padding:  1.5rem;   /* Mobile */

  /* ------------------------------------------------------------------ */
  /* BORDER-RADIUS                                                        */
  /* ------------------------------------------------------------------ */

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------ */
  /* SCHATTEN                                                             */
  /* ------------------------------------------------------------------ */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.2);

  /* ------------------------------------------------------------------ */
  /* ÜBERGÄNGE                                                            */
  /* ------------------------------------------------------------------ */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ------------------------------------------------------------------ */
  /* HEADER                                                               */
  /* ------------------------------------------------------------------ */

  --header-height:        72px;
  --header-height-mobile: 64px;
}

/* Tablet+ */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }
}

/* Desktop+ */
@media (min-width: 1024px) {
  :root {
    --container-padding: 3rem;
  }
}