/* ==========================================================
   SPVGG BAYREUTH
   DESIGN TOKENS
   ========================================================== */

:root {
    /* ======================================================
       BRAND
       ====================================================== */
    scrollbar-color: #FFE900 #000;
    --club-yellow: #FFE900;
    --club-yellow-hover: #FFD500;

    --club-black: #000000;
    --club-white: #FFFFFF;


    /* ======================================================
       COLORS — LIGHT
       ====================================================== */

    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F4F4;
    --bg-soft: #FAFAFA;

    --text-heading: #000000;
    --text-body: #242424;
    --text-muted: #666666;

    --border-light: #E9E9E9;


    /* ======================================================
       COLORS — DARK
       ====================================================== */

    --bg-dark: #000000;
    --bg-dark-secondary: #111111;
    --bg-dark-surface: #1A1A1A;

    --text-inverse: #FFFFFF;
    --text-inverse-muted: #BDBDBD;

    --border-dark: #333333;


    /* ======================================================
       ACCENT
       ====================================================== */

    --color-accent: var(--club-yellow);
    --color-accent-hover: var(--club-yellow-hover);


    /* ======================================================
       SURFACES
       ====================================================== */

    --surface: var(--club-white);
    --surface-soft: var(--bg-secondary);

    --surface-dark: var(--bg-dark-secondary);
    --surface-dark-hover: var(--bg-dark-surface);


    /* ======================================================
       BORDERS
       ====================================================== */

    --border-width: 1px;

    --border-light: #E9E9E9;
    --border-dark: #333333;
    --border-accent: var(--club-yellow);


    /* ======================================================
       SHADOWS
       ====================================================== */

    --shadow-sm:
        0 1px 4px rgba(0, 0, 0, .04);

    --shadow-md:
        0 4px 12px rgba(0, 0, 0, .06);

    --shadow-lg:
        0 12px 30px rgba(0, 0, 0, .08);

    --shadow-hover:
        0 6px 16px rgba(0, 0, 0, .07);


    /* ======================================================
       BUTTON SHADOWS
       ====================================================== */

    --btn-shadow:
        0 1px 4px rgba(0, 0, 0, .035);

    --btn-shadow-hover:
        0 4px 10px rgba(0, 0, 0, .055);


    /* ======================================================
       BADGES
       ====================================================== */

    /*
       Heller Badge für weiße Hintergründe.
       Bewusst nicht weiß, damit er sich sichtbar
       vom weißen Untergrund absetzt.
    */

    --badge-light-bg: #F1F1F1;


    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --transition-fast: .15s ease;
    --transition: .25s ease;
    --transition-slow: .4s ease;

    --btn-transition:
        .35s cubic-bezier(.16, 1, .3, 1);


    /* ======================================================
       BORDER RADIUS
       ====================================================== */

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 999px;


    /* ======================================================
       BUTTON RADIUS
       ====================================================== */

    --btn-radius: 22px;
    --btn-radius-full: 999px;


    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --font-family-heading: "Eczar", serif;
    --font-family-body: "Work Sans", sans-serif;


    /* ======================================================
       DISPLAY
       ====================================================== */

    --font-size-display:
        clamp(48px, 5vw, 68px);


    /* ======================================================
       HEADLINES
       ====================================================== */

    --font-size-h1:
        clamp(34px, 3.5vw, 52px);

    --font-size-h2:
        clamp(26px, 2.6vw, 36px);

    --font-size-h3:
        clamp(22px, 2.2vw, 30px);

    --font-size-h4:
        clamp(19px, 1.8vw, 22px);

    --font-size-h5:
        clamp(17px, 1.5vw, 20px);

    --font-size-h6:
        clamp(15px, 1.3vw, 17px);


    /* ======================================================
       BODY
       ====================================================== */

    --font-size-body-lg:
        clamp(17px, 1.5vw, 19px);

    --font-size-body:
        clamp(16px, 1.2vw, 18px);

    --font-size-small: 14px;

    --font-size-caption: 12px;


    /* ======================================================
       LINE HEIGHT
       ====================================================== */

    --line-height-display: .95;

    --line-height-heading: 1.05;
    --line-height-heading-tight: 1;

    --line-height-body-lg: 1.55;
    --line-height-body: 1.6;

    --line-height-small: 1.4;


    /* ======================================================
       LETTER SPACING
       ====================================================== */

    --letter-spacing-display: -.02em;
    --letter-spacing-heading: -.01em;

    --letter-spacing-body: 0;
    --letter-spacing-small: .02em;

    --letter-spacing-eyebrow: .12em;

    --btn-letter-spacing: .06em;


    /* ======================================================
       SPACING
       ====================================================== */

    --space-2: 4px;
    --space-4: 8px;
    --space-8: 16px;
    --space-12: 24px;

    --space-16:
        clamp(24px, 3vw, 32px);

    --space-20:
        clamp(32px, 4vw, 48px);

    --space-24:
        clamp(56px, 6vw, 80px);

    --space-32:
        clamp(80px, 9vw, 120px);


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

    --container-width: 1440px;

    --container-padding:
        clamp(20px, 3vw, 32px);


    /* ======================================================
       BUTTONS — LIGHT PRIMARY
       ====================================================== */

    --btn-light-primary-bg:
        var(--club-black);

    --btn-light-primary-color:
        var(--club-yellow);

    --btn-light-primary-hover-bg:
        var(--club-yellow);

    --btn-light-primary-hover-color:
        var(--club-black);


    /* ======================================================
       BUTTONS — LIGHT SECONDARY
       ====================================================== */

    --btn-light-secondary-bg:
        transparent;

    --btn-light-secondary-color:
        var(--club-black);

    --btn-light-secondary-border:
        var(--club-black);

    --btn-light-secondary-hover-bg:
        var(--club-black);

    --btn-light-secondary-hover-color:
        var(--club-white);


    /* ======================================================
       BUTTONS — DARK PRIMARY
       ====================================================== */

    --btn-dark-primary-bg:
        var(--club-yellow);

    --btn-dark-primary-color:
        var(--club-black);

    --btn-dark-primary-hover-bg:
        var(--club-white);

    --btn-dark-primary-hover-color:
        var(--club-black);


    /* ======================================================
       BUTTONS — DARK SECONDARY
       ====================================================== */

    --btn-dark-secondary-bg:
        transparent;

    --btn-dark-secondary-color:
        var(--club-white);

    --btn-dark-secondary-border:
        var(--club-white);

    --btn-dark-secondary-hover-bg:
        var(--club-white);

    --btn-dark-secondary-hover-color:
        var(--club-black);


    /* ======================================================
       BUTTON CUT
       ====================================================== */

    --btn-cut: 10px;


    /* ======================================================
       BUTTON SIZES — SMALL
       ====================================================== */

    --btn-sm-height: 32px;
    --btn-sm-padding-x: 16px;
    --btn-sm-padding-y: 6px;
    --btn-sm-font-size: 12px;


    /* ======================================================
       BUTTON SIZES — MEDIUM
       ====================================================== */

    --btn-md-height: 42px;
    --btn-md-padding-x: 24px;
    --btn-md-padding-y: 10px;
    --btn-md-font-size: 13px;


    /* ======================================================
       BUTTON SIZES — LARGE
       ====================================================== */

    --btn-lg-height: 52px;
    --btn-lg-padding-x: 32px;
    --btn-lg-padding-y: 14px;
    --btn-lg-font-size: 14px;


    /* ======================================================
       BUTTON SIZES — FULL
       ====================================================== */

    --btn-full-height: 52px;
    --btn-full-padding-x: 32px;
    --btn-full-padding-y: 14px;
    --btn-full-font-size: 14px;

}