/**
 * Jonny B GmbH – CSS Custom Properties (Design-Tokens)
 * Alle Farben, Abstände, Schriften zentral definiert.
 * Änderung hier wirkt sich auf die gesamte Website aus.
 */

:root {
    /* --------------------------------------------------------
     * Farben – Primär
     * -------------------------------------------------------- */
    --color-primary:        #4a7c3f;  /* Waldgrün (Holz/Natur) */
    --color-primary-light:  #6aad5b;
    --color-primary-dark:   #2f5228;

    /* --------------------------------------------------------
     * Farben – Akzent (alter Jonny-B Grün-Gelb als Option) */
    --color-accent:         #aad019;
    --color-accent-dark:    #8aaa14;

    /* --------------------------------------------------------
     * Farben – Neutral / Grautöne */
    --color-white:          #ffffff;
    --color-gray-100:       #f8f7f4;  /* Warmweißer Hintergrund */
    --color-gray-200:       #eeece8;
    --color-gray-300:       #dbd8d1;
    --color-gray-500:       #9e9a93;
    --color-gray-700:       #5a5650;
    --color-gray-900:       #1e1c1a;  /* Fast Schwarz für Text */
    --color-text:           #2c2a27;

    /* --------------------------------------------------------
     * Farben – Feedback */
    --color-error:          #c0392b;
    --color-success:        #27ae60;
    --color-warning:        #e67e22;

    /* --------------------------------------------------------
     * Typografie */
    --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Open Sans', system-ui, -apple-system, sans-serif;

    --font-size-base:   1rem;       /* 16px */
    --font-size-sm:     0.875rem;   /* 14px */
    --font-size-lg:     1.125rem;   /* 18px */
    --font-size-xl:     1.375rem;   /* 22px */
    --font-size-2xl:    1.75rem;    /* 28px */
    --font-size-3xl:    2.25rem;    /* 36px */
    --font-size-4xl:    3rem;       /* 48px */

    --line-height-base:     1.65;
    --line-height-heading:  1.2;

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* --------------------------------------------------------
     * Abstände */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.5rem;    /* 24px */
    --space-6:   2rem;      /* 32px */
    --space-8:   3rem;      /* 48px */
    --space-10:  4rem;      /* 64px */
    --space-12:  5rem;      /* 80px */

    /* --------------------------------------------------------
     * Layout */
    --container-max:    1280px;
    --container-pad:    var(--space-5);
    --nav-height:       80px;

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

    /* --------------------------------------------------------
     * Schatten */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.15);

    /* --------------------------------------------------------
     * Übergänge */
    --transition-fast:  150ms ease;
    --transition-base:  250ms ease;
    --transition-slow:  400ms ease;

    /* --------------------------------------------------------
     * Galerie */
    --gallery-cols-mobile:  1;
    --gallery-cols-tablet:  2;
    --gallery-cols-desktop: 3;
    --gallery-gap:          var(--space-4);
}