/* ============================================================
   DESIGN TOKENS – Friedensbäume
   Wiederverwendbare CSS-Variablen basierend auf Material-Design-
   Farbsystem. Für alle Sektionen konsistent verwendbar.
   ============================================================ */

:root {
    /* ── Primärfarben ── */
    --color-primary:              #001e40;
    --color-primary-container:    #003366;
    --color-on-primary:           #ffffff;
    --color-on-primary-container: #799dd6;
    --color-primary-fixed:        #d5e3ff;
    --color-primary-fixed-dim:    #a7c8ff;

    /* ── Sekundärfarben ── */
    --color-secondary:              #4d6171;
    --color-secondary-container:    #cde2f5;
    --color-on-secondary:           #ffffff;
    --color-on-secondary-container: #516575;

    /* ── Tertiärfarben (Gold-Akzente) ── */
    --color-tertiary:               #2a1c00;
    --color-tertiary-container:     #453000;
    --color-on-tertiary-container:  #bb9650;
    --color-tertiary-fixed-dim:     #e9c176;

    /* ── Oberflächen ── */
    --color-surface:                  #f9f9fe;
    --color-surface-dim:              #dad9de;
    --color-surface-bright:           #f9f9fe;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f4f3f8;
    --color-surface-container:        #eeedf2;
    --color-surface-container-high:   #e8e8ed;
    --color-surface-container-highest:#e2e2e7;
    --color-surface-variant:          #e2e2e7;
    --color-background:               #f9f9fe;

    /* ── Text / Inhalte ── */
    --color-on-surface:         #1a1c1f;
    --color-on-surface-variant: #43474f;
    --color-on-background:      #1a1c1f;

    /* ── Umrisse ── */
    --color-outline:         #737780;
    --color-outline-variant:  #c3c6d1;

    /* ── Fehler ── */
    --color-error:              #ba1a1a;
    --color-error-container:    #ffdad6;
    --color-on-error:           #ffffff;
    --color-on-error-container: #93000a;

    /* ── Inverse ── */
    --color-inverse-surface:    #2f3034;
    --color-inverse-on-surface: #f1f0f5;
    --color-inverse-primary:    #a7c8ff;

    /* ── Typografie ── */
    --font-headline: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:     'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-label:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ── Schriftgrößen ── */
    --text-xs:   0.625rem;   /* 10px */
    --text-sm:   0.75rem;    /* 12px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */
    --text-4xl:  2.75rem;    /* 44px */

    /* ── Abstände (4px-Raster) ── */
    --space-1:  0.25rem;     /* 4px */
    --space-2:  0.5rem;      /* 8px */
    --space-3:  0.75rem;     /* 12px */
    --space-4:  1rem;        /* 16px */
    --space-5:  1.25rem;     /* 20px */
    --space-6:  1.5rem;      /* 24px */
    --space-8:  2rem;        /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */

    /* ── Ecken-Radien ── */
    --radius-sm:   0.125rem; /* 2px */
    --radius-md:   0.25rem;  /* 4px */
    --radius-lg:   0.5rem;   /* 8px */
    --radius-xl:   0.75rem;  /* 12px */
    --radius-full: 9999px;

    /* ── Schatten ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 10px 40px rgba(0, 30, 64, 0.06);

    /* ── Zeilenhöhen ── */
    --leading-tight:   1.1;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;
    --leading-loose:   1.8;

    /* ── Buchstabenabstand ── */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
    --tracking-widest:  0.15em;

    /* ── Warn- / Status-Farben ── */
    --color-warning:            #f59e0b;
    --color-warning-container:  #fef3c7;
    --color-on-warning:         #ffffff;
    --color-success:            #16a34a;
    --color-success-container:  #dcfce7;
    --color-on-success:         #ffffff;
    --color-info:               #0284c7;
    --color-info-container:     #e0f2fe;
    --color-on-info:            #ffffff;

    /* ── Übergänge ── */
    --transition-fast:    150ms ease;
    --transition-default: 200ms ease;
    --transition-slow:    300ms ease;

    /* ── Maximale Breiten ── */
    --max-width-content: 1440px;
    --max-width-narrow:  1200px;

    /* ── Z-Index-Schichten ── */
    --z-base:    0;
    --z-above:   10;
    --z-sticky:  50;
    --z-overlay: 100;
    --z-modal:   200;
}