/*
 * B7's Barber Shop — brand tokens (variabili CSS globali).
 *
 * Lo style "industrial dark cinematografico" vero (effetti drammatici,
 * loader, vignette, noise, lamp glow, mattoni) sara' applicato in una
 * sessione dedicata con la skill `emporia-design-style`. Qui le fondamenta:
 * palette, font, spacing, transitions.
 *
 * Convenzione: tutti i color literal del progetto devono passare da queste
 * variabili. Niente hex sparsi nei componenti.
 *
 * ============ TEMI (A.11) ============
 * Il DARK e' il tema di default (identita' del brand) e vive in :root.
 * Il LIGHT e' un'inversione "carta calda" sotto [data-theme="light"]:
 * ribaltando qui i token core, le ~317 occorrenze di var(--brand-*) nel
 * resto del CSS flippano da sole.
 *
 * Token "neutri rispetto al tema" (NON si ribaltano, valgono in entrambi):
 *   --on-primary       testo su fill rame (sempre scuro: il rame e' mid-tone)
 *   --brand-primary-*  alpha di rame (tinta rame, leggibile su dark e light)
 *
 * Decisione di design: l'hero resta SCURO anche in light (vedi .hero in
 * main.css, che ri-fissa i token a valori dark al suo interno) per preservare
 * i 3 sfondi glow-su-nero di SfondoHero senza ridisegnarli.
 */

:root {
    /* ============ palette (DARK — default) ============
     * Allineata al mockup analisi/mockup_animato.html (2026-07-09). */
    --brand-primary:    #C8834A;   /* rame — CTA, accenti, marquee */
    --brand-accent:     #F0E6D4;   /* bianco caldo — testo enfasi / hover, divider */
    --brand-bg:         #0C0906;   /* nero-bruno opaco — sfondo base */
    --brand-text:       #E8DDCC;   /* testo principale (alto contrasto su bg) */
    --brand-muted:      #9B8871;   /* testo secondario / note */
    --brand-text-soft:  #B3A288;   /* testo secondario piu' caldo (claim, paragrafi) */
    --brand-text-dim:   #D8C9AE;   /* display secondario (marquee) */
    --brand-faint:      #6F6046;   /* micro-label (footer card, STILE/MODERNO) */

    /* derivati con alpha (per overlay, hover, vignette) */
    --brand-primary-12: rgba(200, 131, 74, 0.12);
    --brand-primary-30: rgba(200, 131, 74, 0.30);
    --brand-bg-soft:    rgba(12, 9, 6, 0.85);

    /* ============ token semantici tema-aware (A.11) ============ */
    --on-primary:       #0C0906;          /* testo su fill rame — COSTANTE, mai ribaltato */
    --on-dark:          #E8DDCC;          /* testo su gradiente scuro (caption su foto) — COSTANTE */
    --surface:          #14100B;          /* superficie sollevata (card scure) */
    --border-subtle:    #2E241A;          /* bordo card/divider */
    --border-strong:    #4A3A27;          /* bordo card in evidenza / outline button */
    --vignette:         rgba(0, 0, 0, 0.45);   /* body::after — scurisce i bordi viewport */
    --noise-opacity:    0.04;                  /* body::before grain */
    --noise-blend:      overlay;
    --primary-hover-bg:   var(--brand-accent); /* hover .btn-primary: bianco caldo su dark */
    --primary-hover-text: var(--brand-bg);

    /* ============ tipografia ============ */
    --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
    --font-body:    "Space Mono", "Courier New", ui-monospace, monospace;

    --fs-base:  15px;
    --fs-sm:    0.8125rem;               /* 13px — corpo sezioni (mockup) */
    --fs-lg:    1.0625rem;
    --fs-eyebrow: 0.6875rem;             /* 11px — eyebrow "0X — NOME" */
    --fs-h1:    clamp(2.5rem, 6vw, 4.5rem);
    --fs-h2:    clamp(2rem,   4.6vw, 3.5rem);   /* mockup: clamp(32px,4.6vw,56px) */
    --fs-h3:    clamp(1.25rem, 2.1vw, 1.5625rem);
    --fs-h4:    1.125rem;

    --lh-tight: 1.02;
    --lh-base:  1.7;

    --tracking-display: 0.02em;   /* Oswald uppercase (mockup: 0.02-0.06em) */
    --tracking-body:    0;

    /* ============ spacing scale ============ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-8:  3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* ============ layout ============ */
    --container-max: 1280px;
    --header-h-mobile:  64px;
    --header-h-desktop: 80px;

    /* ============ transitions ============ */
    --t-fast:  120ms ease-out;
    --t-base:  220ms ease-out;
    --t-slow:  450ms cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ============ shadow / elevation ============ */
    --shadow-soft:  0 4px 18px rgba(0, 0, 0, 0.55);
    --shadow-glow:  0 0 24px var(--brand-primary-30);
}

/* ============ palette (LIGHT — "carta calda") ============
 * Inversione calda: sfondo crema, testo espresso, rame leggermente piu' scuro
 * per reggere il contrasto su fondo chiaro (link + testo su CTA). */
[data-theme="light"] {
    --brand-primary:    #A2611E;   /* rame piu' profondo: contrasto AA su crema */
    --brand-accent:     #2A1C0E;   /* espresso — testo enfasi / hover su chiaro */
    --brand-bg:         #F2E9D8;   /* crema carta — sfondo base */
    --brand-text:       #241A10;   /* espresso scuro — testo principale */
    --brand-muted:      #6E6353;   /* bruno-grigio caldo */

    --brand-primary-12: rgba(162, 97, 30, 0.12);
    --brand-primary-30: rgba(162, 97, 30, 0.34);
    --brand-bg-soft:    rgba(255, 251, 244, 0.92);
    --brand-text-soft:  rgba(36, 26, 16, 0.62);
    --brand-text-dim:   #4A3A28;
    --brand-faint:      #8A7A63;

    --surface:          #FBF6EC;
    --border-subtle:    rgba(36, 26, 16, 0.14);
    --border-strong:    rgba(36, 26, 16, 0.30);
    --vignette:         rgba(70, 45, 18, 0.05);   /* alone caldo appena percettibile */
    --noise-opacity:    0.022;
    --noise-blend:      multiply;
    --primary-hover-bg:   #7E4715;                /* hover .btn-primary: rame bruciato */
    --primary-hover-text: #F6EFE2;

    --shadow-soft:  0 10px 30px rgba(80, 55, 25, 0.16);
    --shadow-glow:  0 0 24px rgba(162, 97, 30, 0.28);

    color-scheme: light;
}