/* ==========================================================
   CASAMANCE NATURE
   VARIABLES.CSS
   ----------------------------------------------------------
   Globale Farben, Größen und Design-Variablen
   ========================================================== */

:root {

    /* ======================================================
       FARBEN
       ====================================================== */

    /* Primärfarbe (Logo) */
    --color-primary: #2f5d3a;

    /* Hellere Variante */
    --color-primary-light: #4d7b57;

    /* Dunklere Variante */
    --color-primary-dark: #1f4229;

    /* Akzentfarbe */
    --color-accent: #c68b3c;

    /* Hintergrund */
    --color-background: #f7f5f0;

    /* Weiß */
    --color-white: #ffffff;

    /* Text */
    --color-text: #2b2b2b;

    /* Grauer Text */
    --color-text-light: #6d6d6d;

    /* Rahmen */
    --color-border: #e2e2e2;

    /* Hero Overlay */
    --hero-overlay:
        linear-gradient(
            90deg,
            rgba(16,34,20,.82) 0%,
            rgba(16,34,20,.55) 40%,
            rgba(16,34,20,.15) 75%,
            rgba(16,34,20,0) 100%
        );



    /* ======================================================
       TYPOGRAFIE
       ====================================================== */

    --font-family:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    --font-size-xs: .85rem;
    --font-size-sm: .95rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.4rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4.4rem;



    /* ======================================================
       SCHRIFTGEWICHTE
       ====================================================== */

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;



    /* ======================================================
       LAYOUT
       ====================================================== */

    --container-width: 1200px;

    --section-spacing: 120px;

    --header-height: 90px;

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 30px;



    /* ======================================================
       SCHATTEN
       ====================================================== */

    --shadow-small:
        0 8px 18px rgba(0,0,0,.08);

    --shadow-medium:
        0 18px 40px rgba(0,0,0,.15);

    --shadow-large:
        0 30px 60px rgba(0,0,0,.20);



    /* ======================================================
       BUTTONS
       ====================================================== */

    --button-height: 58px;

    --button-padding:
        0 34px;



    /* ======================================================
       ANIMATIONEN
       ====================================================== */

    --transition-fast: .25s ease;

    --transition-normal: .35s ease;

    --transition-slow: .55s ease;



    /* ======================================================
       Z-INDEX
       ====================================================== */

    --z-header: 1000;

    --z-modal: 5000;

}