/* ==========================================================================
   InSono — Design Tokens
   Ported from Shopify theme.liquid (:root) + assets/custom.css

   WICHTIG — Schriften (Live insono.shop, Aug 2026):
   - the theme picker only loads Almarai (n4/n7) via @font-face.
   - custom.css sets body to "Inter", … but Inter is NEVER loaded.
   - browsers therefore fall back to system-ui / -apple-system (macOS: SF Pro).
   - --font-body-family bleibt Almarai (Dawn-Komponenten, var(--font-*)).
   - Body-UI-Stack = custom.css (Inter missing → Systemfont). Kein Google-Inter!
   ========================================================================== */

:root {
    /* ---- Surfaces ---- */
    --bg: #f7f4ef;
    --surface: #fffdf9;
    --surface-2: #ebe5db;
    --white: #ffffff;

    /* ---- Text ---- */
    --text: #1e211d;
    --muted: #6d716b;
    --soft: #a99f92;

    /* ---- Linien & Akzente ---- */
    --line: rgba(30, 33, 29, 0.1);
    --line-strong: rgba(30, 33, 29, 0.16);
    --accent: #394237;
    --accent-2: #d7c8b5;
    --header-accent: #6f8f72;
    --header-accent-soft: rgba(111, 143, 114, 0.12);
    --header-warm: #c9822d;

    /* ---- Status ---- */
    --success: #2f7d4f;
    --success-soft: rgba(47, 125, 79, 0.12);
    --warning: #c9822d;
    --warning-soft: rgba(201, 130, 45, 0.12);
    --danger: #b3261e;
    --danger-soft: rgba(179, 38, 30, 0.1);
    --sale: #c0392b;

    /* ---- Schatten ---- */
    --shadow: 0 24px 80px rgba(45, 39, 31, 0.09);
    --shadow-soft: 0 14px 40px rgba(45, 39, 31, 0.07);
    --shadow-card: 0 10px 28px rgba(45, 39, 31, 0.08);

    /* ---- Radien ---- */
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-pill: 999px;

    /* ---- Layout ---- */
    --page-width: 1120px;
    --page-gutter: 16px;
    --header-height: 84px;

    /* ---- Typografie (theme.liquid settings: almarai_n4, scale 100) ----
       html { font-size: calc(var(--font-body-scale) * 62.5%) }
       → bei scale 100: 1rem = 10px. body 1.5rem = 15px / 1.6rem = 16px. */
    --font-body-family: Almarai, sans-serif;
    --font-body-style: normal;
    --font-body-weight: 400;
    /* Shopify: weight + 300 | at_most 1000 → 700 */
    --font-body-weight-bold: 700;

    --font-heading-family: Almarai, sans-serif;
    --font-heading-style: normal;
    --font-heading-weight: 400;

    --font-body-scale: 1;
    --font-heading-scale: 1;

    /* custom.css body stack — Inter is deliberately NOT loaded (as on live) */
    --font-ui-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Kurz-Aliase */
    --font-body: var(--font-body-family);
    --font-heading: var(--font-heading-family);

    /* ---- Bewegung ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 180ms ease;
    --transition-base: 260ms var(--ease-out);

    /* Dawn/Shopify RGB triplets — needed by ported PDP CSS
       (rgb(var(--color-foreground)) / rgba(var(--color-foreground), a)) */
    --color-foreground: 30, 33, 29;
    --color-background: 255, 253, 249;
}

@media screen and (min-width: 750px) {
    :root {
        --page-gutter: 32px;
    }
}

@media screen and (min-width: 990px) {
    :root {
        --page-gutter: 50px;
    }
}