/* =========================================================
   MeerHeimatLiebe 2.0
   DESIGN TOKENS
   ========================================================= */

:root {

    /* -----------------------------------------------------
       Maritime Farbwelt
       ----------------------------------------------------- */

    --mhl-color-ocean-deep: #07324a;
    --mhl-color-ocean-night: #062536;

    --mhl-color-ocean: #075985;
    --mhl-color-north-sea: #087e8b;
    --mhl-color-baltic: #14919b;

    --mhl-color-sea: #0f9f9a;
    --mhl-color-sea-light: #5bc7c1;

    --mhl-color-foam: #f5fbfa;
    --mhl-color-white: #ffffff;

    --mhl-color-sand-light: #f5f1e8;
    --mhl-color-sand: #ded2bd;
    --mhl-color-sand-dark: #bcae94;

    --mhl-color-dune: #7d9365;
    --mhl-color-dune-dark: #506345;

    --mhl-color-sunset: #e6a56f;

    --mhl-color-text: #16394d;
    --mhl-color-text-muted: #557080;


    /* -----------------------------------------------------
       Verläufe
       ----------------------------------------------------- */

    --mhl-gradient-ocean:
        linear-gradient(
            135deg,
            #07324a 0%,
            #075985 45%,
            #0f9f9a 100%
        );

    --mhl-gradient-sea:
        linear-gradient(
            135deg,
            #075985 0%,
            #087e8b 50%,
            #5bc7c1 100%
        );

    --mhl-gradient-sunset:
        linear-gradient(
            135deg,
            #075985 0%,
            #087e8b 52%,
            #e6a56f 145%
        );

    --mhl-gradient-night:
        linear-gradient(
            135deg,
            #062536 0%,
            #07324a 55%,
            #075985 100%
        );


    /* -----------------------------------------------------
       Glassmorphism
       ----------------------------------------------------- */

    --mhl-glass-light:
        rgba(255, 255, 255, 0.16);

    --mhl-glass-light-strong:
        rgba(255, 255, 255, 0.24);

    --mhl-glass-dark:
        rgba(6, 37, 54, 0.68);

    --mhl-glass-ocean:
        rgba(7, 89, 133, 0.38);

    --mhl-glass-border:
        rgba(255, 255, 255, 0.24);

    --mhl-glass-border-strong:
        rgba(255, 255, 255, 0.38);

    --mhl-glass-shadow:
        0 20px 60px rgba(6, 37, 54, 0.18);

    --mhl-glass-shadow-heavy:
        0 30px 90px rgba(6, 37, 54, 0.28);

    --mhl-glass-blur:
        20px;

    --mhl-glass-blur-heavy:
        32px;


    /* -----------------------------------------------------
       Radien
       ----------------------------------------------------- */

    --mhl-radius-sm: 10px;
    --mhl-radius-md: 16px;
    --mhl-radius-lg: 24px;
    --mhl-radius-xl: 32px;
    --mhl-radius-pill: 999px;


    /* -----------------------------------------------------
       Container
       ----------------------------------------------------- */

    --mhl-container: 1280px;
    --mhl-container-wide: 1440px;
    --mhl-container-narrow: 900px;


    /* -----------------------------------------------------
       Abstände
       ----------------------------------------------------- */

    --mhl-space-1: 0.5rem;
    --mhl-space-2: 0.75rem;
    --mhl-space-3: 1rem;
    --mhl-space-4: 1.5rem;
    --mhl-space-5: 2rem;
    --mhl-space-6: 3rem;
    --mhl-space-7: 4rem;
    --mhl-space-8: 6rem;
    --mhl-space-9: 8rem;


    /* -----------------------------------------------------
       Schatten
       ----------------------------------------------------- */

    --mhl-shadow-sm:
        0 4px 16px rgba(6, 37, 54, 0.10);

    --mhl-shadow-md:
        0 12px 32px rgba(6, 37, 54, 0.14);

    --mhl-shadow-lg:
        0 24px 60px rgba(6, 37, 54, 0.18);


    /* -----------------------------------------------------
       Übergänge
       ----------------------------------------------------- */

    --mhl-transition-fast:
        160ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --mhl-transition-base:
        260ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --mhl-transition-slow:
        500ms cubic-bezier(0.2, 0.8, 0.2, 1);


    /* -----------------------------------------------------
       Typografie
       ----------------------------------------------------- */

    --mhl-font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --mhl-font-display:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* -----------------------------------------------------
       Z-Index System
       ----------------------------------------------------- */

    --mhl-z-content: 1;
    --mhl-z-overlay: 10;
    --mhl-z-header: 1000;
    --mhl-z-modal: 2000;
}