/*
Theme Name: Lyssna
Theme URI: https://lyssna-acoustics.com
Description: Custom theme voor lyssna-acoustics.com — Scandinavian Sound. Designed to Evolve. Gebouwd zonder Elementor of page builders, ingericht rond de Kickstarter-campagne.
Version: 1.15.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Lyssna Acoustics
Author URI: https://lyssna-acoustics.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lyssna
Domain Path: /languages
*/

/* ═══════════════════════════════════════════════════════════════
   CSS VARIABELEN — huisstijl Lyssna Acoustics

   Kleuren: die van de live site (de oude Elementor-globals).
   Vorm, typografie en ritme: het Claude Design-systeem van de
   Kickstarter-campagne (design_handoff_lyssna_theme), vertaald naar
   dit palet. Wijzig ze hier en ze veranderen overal mee.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Kleur ──────────────────────────────────────────────── */
    --ly-ink:        #141414;  /* koppen, knoppen, donkere secties */
    --ly-taupe:      #625D57;  /* lopende en secundaire tekst      */
    --ly-olive:      #6F7A58;  /* accentlijn, randen, focus — níét voor kleine tekst */
    --ly-olive-diep: #596346;  /* accent als tekst (links): haalt contrast 6:1 */
    --ly-cream:      #FAF8F5;  /* paginaachtergrond                */
    --ly-white:      #FFFDFB;  /* kaarten                          */
    --ly-sand:       #F1EDE7;  /* rustige tussenband, bv. reward tiers */
    --ly-line:       #DDD7CF;  /* lijnen en randen                 */

    /* Lopende tekst was #7A7A7A (live site), maar haalt op cream geen
       leesbaar contrast (4,0 : 1 waar 4,5 nodig is). Taupe haalt 6,2. */
    --ly-body:       var(--ly-taupe);

    --ly-ink-hover:  #33312E;

    /* Op donkere grond (#141414) */
    --ly-op-donker:       var(--ly-cream);
    --ly-op-donker-zacht: rgba(250, 248, 245, .74);
    --ly-lijn-donker:     rgba(250, 248, 245, .22);

    /* Afwerkingen — alleen als productinformatie (kleurstalen) */
    --ly-finish-graphite:    #211E21;
    --ly-finish-petrol:      #10494F;
    --ly-finish-ultramarine: #2E3F7E;
    --ly-finish-cream:       #E2CFB3;

    /* Verloop over foto's, zodat tekst leesbaar blijft. */
    --ly-scrim-vol: linear-gradient(180deg, rgba(20,20,20,.5) 0%, rgba(20,20,20,.08) 30%, rgba(20,20,20,.9) 100%);

    /* ── Typografie ─────────────────────────────────────────── */
    --ly-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --ly-tekst:     clamp(1rem, 0.94rem + 0.25vw, 1.125rem);      /* 16 → 18px */
    --ly-lood:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);       /* 19 → 24px */
    --ly-h1:        clamp(2.5rem, 1.55rem + 4.2vw, 5.6rem);       /* 40 → 90px */
    --ly-h2:        clamp(2rem, 1.45rem + 2.4vw, 3.5rem);         /* 32 → 56px */
    --ly-h3:        clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);   /* 20 → 26px */

    --ly-spatie-display: -0.022em;
    --ly-spatie-label:   0.16em;
    --ly-spatie-kicker:  0.28em;

    /* ── Vorm ───────────────────────────────────────────────── */
    --ly-max:       1240px;
    --ly-gutter:    24px;
    --ly-nav-h:     76px;

    --ly-radius:      6px;    /* invoervelden, kleine vlakken */
    --ly-radius-md:  14px;    /* kaarten                       */
    --ly-radius-lg:  20px;    /* grote foto's, logoplaat       */
    --ly-radius-pill: 999px;  /* knoppen en statuslabels       */

    --ly-accentlijn: 8px;
    --ly-schaduw-plaat: 0 2px 12px rgba(20, 20, 20, .18);

    /* ── Beweging: rustig, niets stuitert ──────────────────── */
    --ly-duur:  .4s;
    --ly-ease:  cubic-bezier(.2, .7, .2, 1);

    /* ── Ritme ──────────────────────────────────────────────── */
    --ly-section: 120px;  /* verticale ruimte tussen secties   */
}

@media (max-width: 900px) {
    :root {
        --ly-section: 72px;
        --ly-nav-h:   64px;
        --ly-gutter:  20px;
    }
}