/* =====================================================
   DESIGN TOKENS – Single Source of Truth
   Alle Werte NUR hier ändern.
===================================================== */

:root {

    /* -----------------------------------------------
       BRAND COLORS
    ----------------------------------------------- */
    --color-primary:       #C7F000;
    --color-primary-hover: #b3da00;

    /* -----------------------------------------------
       NEUTRAL PALETTE
    ----------------------------------------------- */
    --color-black:     #0E0E0E;
    --color-dark:      #161616;
    --color-dark-soft: #1E1E1E;
    --color-grey:      #9A9A9A;
    --color-white:     #FFFFFF;

    /* -----------------------------------------------
       SEMANTIC TEXT COLORS
    ----------------------------------------------- */
    --text-main:  var(--color-white);
    --text-muted: var(--color-grey);
    --text-dark:  var(--color-black);
    --text-light: var(--color-white);

    /* -----------------------------------------------
       SEMANTIC BACKGROUNDS
    ----------------------------------------------- */
    --bg-primary:       var(--color-primary);
    --bg-body:          var(--color-black);
    --bg-dark:          var(--color-dark);
    --bg-dark-soft:     var(--color-dark-soft);
    --bg-section-dark:  var(--color-dark);
    --bg-section-light: var(--color-white);
    --bg-card:          var(--color-dark-soft);
    --bg-light:         var(--color-white);

    /* -----------------------------------------------
       TYPOGRAPHY
    ----------------------------------------------- */
    --font-base:    "Rethink Sans", sans-serif;
    --font-heading: "Rethink Sans", sans-serif;

    --fw-regular: 400;
    --fw-bold:    700;
    --fw-black:   900;

    --base-lh: 1.3;

    --fs-h1:       clamp(3rem, 5vw, 5rem);
    --fs-h2:       clamp(2.2rem, 4vw, 3.2rem);
    --fs-h3:       1.6rem;
    --fs-base:     1.35rem;
    --fs-small:    1rem;
    --fs-main-nav: 1rem;

    /* -----------------------------------------------
       SPACING SCALE
    ----------------------------------------------- */
    --space-2xs: 0.125rem;  /*  2px */
    --space-xs:  0.25rem;   /*  4px */
    --space-s:   0.5rem;    /*  8px */
    --space-m:   1rem;      /* 16px */
    --space-l:   1.5rem;    /* 24px */
    --space-xl:  2rem;      /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 5rem;      /* 80px */

    /* -----------------------------------------------
       LAYOUT
    ----------------------------------------------- */
    --container: 80vw;

    /* -----------------------------------------------
       BORDERS & RADII
    ----------------------------------------------- */
    --radius-s: 6px;
    --radius:   12px;
    --radius-l: 20px;

    /* -----------------------------------------------
       MOTION
    ----------------------------------------------- */
    --transition: 0.3s ease;

    /* -----------------------------------------------
       Z-INDEX SCALE
    ----------------------------------------------- */
    --z-header:  100;
    --z-overlay: 200;
    --z-toast:   300;

    /* -----------------------------------------------
       BREAKPOINTS (als Referenz – nicht in @media nutzbar)
       Verwende immer die px-Werte direkt in @media-Queries.
    ----------------------------------------------- */
    /* sm: 576px | md: 768px | lg: 1024px | xl: 1280px */
}