/* Cigarrsalongen — designtokens.
 *
 * Värdena är mätta ur mockups/ (dominantfärger och ljusa textpixlar per region), inte
 * uppskattade. Mallarna använder ENDAST tokens; ingen CSS-fil nedanför denna får ha
 * hårdkodade färger. SPEC-CCC.md avsnitt 7.
 *
 * Mätpunkter:
 *   bakgrund        mockup 1 + 2, ren yta            #2C2421
 *   kantpanel ek    mockup 1, x=40 och x=W-40        #40312A / #4A382E
 *   kortyta         mockup 1, bildkort               #17120F
 *   rubriktext      mockup 2, "All cocktails"        #F5E0CC
 *   brödtext        mockup 2, radnamn                #F0DBC6
 *   koppar (fyll)   mockup 2, A–Ö-listen             #CB8046
 *   bärnsten        SPEC avsnitt 7                   #D9A441
 */

:root {
    /* Ytor — mörkt kolbrunt, mörkare ju djupare in i sidan */
    --surface-page: #2c2421;
    --surface-raised: #332a26;
    --surface-sunken: #241c19;
    --surface-deep: #17120f;
    --surface-edge: #3e2f28;
    --surface-edge-dark: #241b16;

    /* Text — varm off-white, dämpad variant för metadata */
    --text-strong: #f5e0cc;
    --text: #f0dbc6;
    --text-muted: #b79c89;
    --text-on-accent: #241a12;

    /* Accenter — koppar i fyllningar, bärnsten i detaljer och fokus */
    --accent: #cb8046;
    --accent-strong: #d9a441;
    --accent-dim: #8a5a35;

    /* Linjer */
    --line: #45372f;
    --line-strong: #5a473c;

    /* Slöjor över bild. Korten i mockup 1 har glaset till höger och texten till vänster
     * ovanpå en mörk toning — därför en vågrät och en lodrät variant av samma svärta. */
    --scrim-solid: rgba(17, 13, 11, 0.92);
    --scrim-soft: rgba(17, 13, 11, 0.4);
    --scrim-clear: rgba(17, 13, 11, 0);

    /* Rökslöjan i bakgrunden (mockup 1 och 3) görs med gradienter, inte med en bild —
     * docs/ASSETS.md avsnitt 3 säger uttryckligen: testa CSS först. */
    --smoke-near: rgba(226, 205, 184, 0.075);
    --smoke-far: rgba(226, 205, 184, 0.045);

    /* Typsnitt — Google Fonts, laddade i theme/layout.php.
     * Oswald och Archivo Narrow är två av de tre kandidaterna i docs/ASSETS.md avsnitt 6
     * och ligger närmast mockupernas kondenserade grotesk: Oswald för rubriker och
     * logotyp, Archivo Narrow för brödtext där längre stycken ska gå att läsa. */
    --font-display: "Oswald", "Avenir Next Condensed", "Helvetica Neue Condensed",
        "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Archivo Narrow", "Avenir Next Condensed", "Arial Narrow",
        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --weight-display: 500;
    --weight-heading: 600;
    --weight-body: 400;
    --weight-bold: 600;

    /* Typskala — mobil först, växer vid 48rem via medieförfrågningarna nedan */
    --size-hero: 2rem;
    --size-h1: 1.875rem;
    --size-h2: 1.375rem;
    --size-body: 1rem;
    --size-lead: 1.0625rem;
    --size-small: 0.875rem;
    --size-label: 0.75rem;
    --size-logo: 1.75rem;
    --size-nav: 1rem;

    --leading-tight: 1.1;
    --leading-body: 1.55;

    --tracking-wide: 0.3em;
    --tracking-label: 0.08em;
    --tracking-card: 0.04em;

    /* Avstånd — 4px-bas */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Mått */
    --measure: 68rem;
    --gutter: 1rem;
    --edge-width: 0px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-pill: 999px;

    /* Bildytor. Kortens 2,4:1 och receptbildens 4:3 är samma format som
     * docs/ASSETS.md beskriver för beskärningarna, så samma original räcker. */
    --ratio-card: 12 / 5;
    --ratio-photo: 4 / 3;
    --ratio-thumb: 4 / 3;

    --focus-ring: 2px solid var(--accent-strong);
    --focus-offset: 2px;
}

@media (min-width: 48rem) {
    :root {
        --size-hero: 2.75rem;
        --size-h1: 2.75rem;
        --size-h2: 1.75rem;
        --size-lead: 1.25rem;
        --size-logo: 2.25rem;
        --size-nav: 1.125rem;
        --gutter: 2rem;
        --edge-width: 72px;
    }
}

@media (min-width: 90rem) {
    :root {
        --edge-width: 110px;
    }
}