/* ===========================================================================
   danasshop — THEME (zentrale Design-Tokens)
   ---------------------------------------------------------------------------
   EINZIGE QUELLE DER WAHRHEIT für Farben, Schriften, Maße, Schatten.
   Wird auf JEDER Seite vor style.css geladen (über includes/header.php),
   damit ALLE Unterseiten – Shop, Produktseiten, Checkout, Admin – exakt
   dieselbe Designsprache verwenden. Farbe ändern? Nur hier anpassen.
   =========================================================================== */

/* ---- Schriften lokal (DSGVO-konform, kein Google-CDN) -------------------- */
/* Cormorant Garamond – Überschriften */
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-garamond-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-garamond-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/cormorant-garamond-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/cormorant-garamond-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Inter – Fließtext / UI */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/inter-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/inter-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/inter-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    /* ---- Farbwelt — warme Naturtöne ---------------------------------- */
    --cream:        #faf6ef;  /* Cremeweiß — Haupt-Hintergrund    */
    --cream-deep:   #f3ecdf;  /* leicht wärmerer Abschnitt        */
    --beige:        #ece1cf;  /* Beige                            */
    --sand:         #ddcbb0;  /* Sand                             */
    --sage:         #8a9a7b;  /* Salbei-Grün                     */
    --sage-deep:    #6f7e62;  /* dunkleres Salbei (Text/Hover)   */
    --sage-soft:    #cdd5c2;  /* zartes Salbei (Flächen/Badges)  */
    --wood:         #a8825e;  /* Holzton                          */
    --wood-deep:    #7c5f43;  /* dunkles Holz                    */
    --terracotta:   #c0623f;  /* Akzent — Terrakotta             */
    --terracotta-d: #a8512f;  /* Terrakotta Hover                */
    --copper:       #b07a43;  /* warmes Kupfer                   */
    --ink:          #382f27;  /* warmer, fast-schwarzer Text     */
    --ink-soft:     #5c5147;  /* gedämpfter Fließtext            */
    --muted:        #897c6d;  /* Hilfslinien-Text                */
    --line:         #e4d9c6;  /* dezente Rahmen                  */
    --white:        #fffdf9;

    /* Funktionale Aliase (für klare Bedeutung in Komponenten) */
    --color-bg:      var(--cream);
    --color-surface: var(--white);
    --color-text:    var(--ink-soft);
    --color-heading: var(--ink);
    --color-accent:  var(--terracotta);
    --color-border:  var(--line);

    /* ---- Typografie -------------------------------------------------- */
    /* Cormorant/Inter werden automatisch genutzt, sobald lokal gehostet
       (assets/fonts/ + @font-face) — bis dahin elegante System-Fallbacks. */
    --font-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, 'Book Antiqua', Georgia, serif;
    --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ---- Maße & Rhythmus -------------------------------------------- */
    --maxw:       1180px;
    --maxw-wide:  1360px;
    --gap:        clamp(1rem, 3vw, 2rem);
    --radius:     14px;
    --radius-lg:  22px;
    --radius-sm:  10px;

    /* ---- Schatten & Bewegung ---------------------------------------- */
    --shadow-sm:  0 2px 10px rgba(56, 47, 39, .06);
    --shadow-md:  0 14px 40px rgba(56, 47, 39, .12);
    --shadow-lg:  0 26px 70px rgba(56, 47, 39, .18);
    --ease:       cubic-bezier(.22, .61, .36, 1);
}