/* ============================================================
   REEON – base.css
   Design Tokens, Typografie, Reset, globale Grundregeln
   ============================================================ */


/* ─── CSS CUSTOM PROPERTIES ────────────────────────────────── */
:root {

    /* Farben */
    --color-bg:             #0D0D0D;
    --color-dark:           #232323;
    --color-darker:         #111111;
    --color-light-grey:     #A1A1A1;
    --color-white:          #FFFFFF;
    --color-brand:          #00A8EE;       /* REEON Blau */
    --color-accent-dynamic: #00A8EE;       /* Per JS überschreibbar pro Song/News */

    /* Merch Section Gradient */
    --color-merch-outer:    #C0C0BF;
    --color-merch-inner:    #87898A;

    /* Typografie – Farben */
    --text-primary:         #FFFFFF;
    --text-muted:           rgba(255, 255, 255, 0.4);   /* Artist Name unter Track */
    --text-dark:            #111111;
    --text-grey:            #A1A1A1;

    /* Fonts */
    --font-display:         'Gabarito', sans-serif;     /* H1, Tracktitel, grosse Headlines */
    --font-ui:              'Oswald', sans-serif;        /* Nav, Buttons, Labels, Links */
    --font-body:            'Gabarito', sans-serif;      /* Fliesstext */

    /* Schriftgrössen */
    --text-h1:              110px;
    --text-h2:              64px;
    --text-h3:              40px;          /* Trackname */
    --text-h4:              20px;          /* Artist Name */
    --text-nav:             20px;
    --text-btn:             18px;
    --text-body:            18px;
    --text-label:           11px;          /* Admin Labels, kleine Captions */

    /* Font Weights */
    --weight-black:         900;
    --weight-semibold:      600;
    --weight-normal:        400;

    /* Line Height */
    --leading-body:         1.4;           /* 140% */
    --leading-tight:        1.1;

    /* Spacing */
    --section-padding:      140px;         /* Section oben/unten */
    --container-width:      1280px;        /* Max-width Content */
    --container-padding:    24px;          /* Seitenabstand mobile */
    --gap-grid:             48px;          /* Song Card Grid Gap */

    /* Breakpoints (als Referenz, in Media Queries direkt verwenden) */
    /* Mobile:  < 500px  */
    /* Tablet:  < 768px  */
    /* Desktop: > 768px  */

    /* Border Radius */
    --radius-card:          8px;
    --radius-panel:         12px;
    --radius-btn:           6px;

    /* Transitions */
    --transition-default:   0.3s ease;
    --transition-slow:      0.8s cubic-bezier(0.4, 0, 0.2, 1);

    /* Admin Panel (nie für Frontend verwenden) */
    --admin-bg:             #141414;
    --admin-border:         #2a2a2a;
    --admin-input:          #1e1e1e;
    --admin-accent:         #4cb3ff;
    --admin-text:           #FFFFFF;
    --admin-muted:          #555555;
}


/* ─── FONT FACES (lokal von assets/fonts/) ─────────────────── */
@font-face {
    font-family: 'Gabarito';
    src: url('../assets/fonts/Gabarito-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;   /* Variable Font – deckt alle Weights ab */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('../assets/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700;   /* Variable Font – deckt alle Weights ab */
    font-style: normal;
    font-display: swap;
}


/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

ul, ol {
    list-style: none;
}


/* ─── TYPOGRAFIE ────────────────────────────────────────────── */

/* H1 – Hero, grosse Section Headlines */
h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-transform: uppercase;
}

/* H2 – Section Titles wie "FEATURED", "100K PLAYS" */
h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-transform: uppercase;
}

/* H3 – Trackname */
h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

/* H4 – Artist Name unter Track */
h4 {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-normal);
    color: var(--text-muted);
}

/* Body Text – Artist/DJ Bio, allgemeiner Fliesstext */
p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body);
    color: var(--text-grey);
}


/* ─── BUTTONS ───────────────────────────────────────────────── */

/* Primary Button – filled weiss */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--text-btn);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    background: var(--color-white);
    color: var(--color-darker);
    transition: all var(--transition-default);
}
.btn:hover { opacity: 0.85; }

/* Inverted Button – weisser Text, transparenter Background mit Border */
.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
}
.btn-outline:hover { background: rgba(255,255,255,0.08); }

/* Brand Button – Accent Farbe */
.btn-brand {
    background: var(--color-brand);
    color: var(--color-white);
}


/* ─── CONTAINER ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/* ─── SECTION ───────────────────────────────────────────────── */
.section {
    padding: var(--section-padding) 0;
}

/* Section Hintergründe */
.section-dark    { background-color: var(--color-dark); }
.section-darker  { background-color: var(--color-darker); }
.section-merch   { background: radial-gradient(ellipse at center, var(--color-merch-inner), var(--color-merch-outer)); }


/* ─── DYNAMIC ACCENT ────────────────────────────────────────── */
/* Wird per JS pro Song/News gesetzt:
   document.documentElement.style.setProperty('--color-accent-dynamic', '#hex'); */
.accent-dynamic         { color: var(--color-accent-dynamic); }
.accent-dynamic-border  { border-color: var(--color-accent-dynamic); }
.accent-dynamic-bg      { background-color: var(--color-accent-dynamic); }


/* ─── RESPONSIVE TYPOGRAFIE ─────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --text-h1:          64px;
        --text-h2:          40px;
        --text-h3:          28px;
        --text-h4:          16px;
        --section-padding:  80px;
    }
}

@media (max-width: 500px) {
    :root {
        --text-h1:          48px;
        --text-h2:          32px;
        --section-padding:  60px;
        --container-padding: 16px;
    }
}


/* ─── UTILITY ───────────────────────────────────────────────── */
.text-muted     { color: var(--text-muted); }
.text-grey      { color: var(--text-grey); }
.text-brand     { color: var(--color-brand); }
.text-upper     { text-transform: uppercase; }
.text-ui        { font-family: var(--font-ui); font-weight: var(--weight-semibold); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}