/* ========================================
   GeoGraSim Design Tokens
   Stil: Scandinavian Minimal
   ======================================== */

:root {
  /* --- Farben: Gedeckte Naturpalette --- */
  --color-bg:          #fafaf8;
  --color-bg-warm:     #f5f3ef;
  --color-surface:     #ffffff;
  --color-surface-alt: #f0eeea;

  --color-text:        #1a1a1a;
  --color-text-secondary: #5a5a5a;
  --color-text-muted:  #8a8a8a;

  /* Akzentfarben — gedeckt, natürlich */
  --color-fjord:       #4a7c8a;   /* Petrol/Fjord-Blau */
  --color-fjord-light: #dae8ec;
  --color-moss:        #5a8a5e;   /* Moos-Grün */
  --color-moss-light:  #dceadd;
  --color-sand:        #c4a35a;   /* Sandstein */
  --color-sand-light:  #f2eacc;
  --color-coral:       #c07a6b;   /* Gedecktes Korall */
  --color-coral-light: #f2ddd8;
  --color-slate:       #6a6a7a;   /* Schiefer */
  --color-slate-light: #e2e2e8;

  /* Klassen-Farben */
  --color-k1:          #4a7c8a;   /* 1. Klasse: Fjord */
  --color-k2:          #5a8a5e;   /* 2. Klasse: Moos */
  --color-k3:          #c4a35a;   /* 3. Klasse: Sand */
  --color-k4:          #c07a6b;   /* 4. Klasse: Korall */

  /* Feedback */
  --color-success:     #5a8a5e;
  --color-warning:     #c4a35a;
  --color-error:       #b55a4a;
  --color-info:        #4a7c8a;

  /* --- Typografie --- */
  --font-family:       'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:      0.75rem;
  --font-size-sm:      0.85rem;
  --font-size-base:    0.95rem;
  --font-size-md:      1.1rem;
  --font-size-lg:      1.4rem;
  --font-size-xl:      2rem;
  --font-size-xxl:     3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   600;
  --font-weight-black:  800;

  --line-height:       1.65;
  --letter-spacing:    -0.01em;

  /* --- Spacing --- */
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2.5rem;
  --space-xxl:   4rem;

  /* --- Radien --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* --- Schatten --- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);

  /* --- Animation --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-scenic: 20s;   /* Für Deko-Animationen */

  /* --- Layout --- */
  --max-width:   1140px;
  --nav-height:  60px;
}