/* ==========================================================================
   tokens.css — Design-Tokens
   1:1 aus 02-Designsystem.md Abschnitt 11. Einzige Quelle der Wahrheit
   fuer Farben, Typografie, Abstaende, Radien, Schatten.
   ========================================================================== */

:root {
  /* --- Marke (RELAUNCH 2026 — Boutique-Luxe, aus echtem Logo, 02-Designsystem.md §Farbwelt) --- */
  --color-primary:            #123A2C;  /* tiefes Waldgrün (Hero-Band, Footer, Primär-CTA) */
  --color-primary-dark:       #02231C;  /* authentisches Logo-Grün, tiefster Ton */
  --color-primary-light:      #2E5245;  /* Hover/aufgehelltes Grün, Rahmen auf Dunkel */
  --color-graphite:           #3A423F;  /* Silber/Graphit — Sekundärtext-Dunkel */
  --color-silver:             #B9C4BE;  /* Silber — Hairlines/Labels auf Grün */
  --color-accent:             #A6772E;  /* gedecktes Messing/Gold — nur feiner Akzent, NIE Button-Fläche */
  --color-accent-bright:      #C9A24B;  /* helleres Gold auf Grün (Marken-Punkt) */
  --color-accent-dark:        #8A5F22;  /* dunkles Gold als Text/Link auf Creme (AA) */
  --color-accent-light:       #E8DAB8;  /* weicher Gold-Tint (Badge/Zitat) */

  /* --- Neutral --- */
  --color-bg:                 #F6F2E9;  /* warmes Creme (Seitengrund, kein hartes Weiß) */
  --color-bg-card:            #FFFFFF;
  --color-bg-alt:             #EEE8DA;  /* alternierende Sektion / ruhiger Block */
  --color-border:             #E0D9C9;
  --color-border-strong:      #C6BCA6;
  --color-text:               #1C2621;  /* Near-Black mit Grünstich */
  --color-text-muted:         #55605B;
  --color-text-on-dark:       #F1F0E9;
  --color-text-on-dark-muted: #B9C4BE;

  /* --- Status --- */
  --color-success:    #2E6B4F;  --color-success-bg: #E4EEE7;
  --color-success-tx: #1F4733;
  --color-warning:    #B07A1E;  --color-warning-bg: #F6ECD6;
  --color-warning-tx: #5A4410;
  --color-error:      #B23A32;  --color-error-bg:   #F5E3DE;
  --color-error-tx:   #7A2620;
  --color-info:       #2E5245;  --color-info-bg:    #E7ECE7;

  /* --- Typografie --- */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Helvetica, Arial, sans-serif;

  /* Schriftgroessen — Desktop (Basis 16px). Mobil via Media Query in base.css */
  --fs-display:  3.5rem;     /* 56px */
  --fs-h1:       2.75rem;    /* 44px */
  --fs-h2:       2rem;       /* 32px */
  --fs-h3:       1.5rem;     /* 24px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-h5:       1.0625rem;  /* 17px */
  --fs-h6:       0.8125rem;  /* 13px */
  --fs-body-lg:  1.1875rem;  /* 19px */
  --fs-body:     1.0625rem;  /* 17px */
  --fs-body-sm:  0.9375rem;  /* 15px */
  --fs-caption:  0.8125rem;  /* 13px */
  --fs-button:   1rem;       /* 16px */

  --lh-display: 1.12;
  --lh-h1:      1.18;
  --lh-h2:      1.25;
  --lh-h3:      1.3;
  --lh-h4:      1.35;
  --lh-h5:      1.4;
  --lh-body:    1.7;
  --lh-body-lg: 1.65;

  /* --- Radien --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Schatten (grün getönt, ruhig — Briefing §26 „keine billigen Schatten") --- */
  --shadow-sm:     0 1px 2px rgba(18,58,44,0.06);
  --shadow-md:     0 8px 24px rgba(18,58,44,0.09);
  --shadow-lg:     0 20px 52px rgba(2,35,28,0.16);
  --shadow-header: 0 2px 14px rgba(18,58,44,0.07);

  /* --- Abstaende (8px-Basisraster) --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Sektionsabstand — Desktop; mobil/tablet via Media Query */
  --section-pad: var(--space-3xl);

  /* --- Layout --- */
  --container-wide:    1280px;
  --container-content: 1080px;
  --container-text:    680px;
  --gutter:            48px;   /* Desktop; mobil/tablet via Media Query */

  /* --- Bewegung --- */
  --transition: 180ms ease;

  /* --- Header --- */
  --header-h:         84px;
  --header-h-sticky:  64px;
}

/* Tablet */
@media (max-width: 959px) {
  :root {
    --section-pad: var(--space-2xl);
    --gutter: 32px;
  }
}

/* Mobil */
@media (max-width: 599px) {
  :root {
    --section-pad: var(--space-xl);
    --gutter: 20px;
    --header-h: 64px;
    --header-h-sticky: 64px;

    --fs-display:  2.125rem;   /* 34px */
    --fs-h1:       1.875rem;   /* 30px */
    --fs-h2:       1.5rem;     /* 24px */
    --fs-h3:       1.25rem;    /* 20px */
    --fs-h4:       1.125rem;   /* 18px */
    --fs-h5:       1rem;       /* 16px */
    --fs-body-lg:  1.0625rem;  /* 17px */
    --fs-body:     1rem;       /* 16px */
  }
}