/* ══════════════════════════════════════════════════════════════════
   tokens.css — Fonte di verità del design system
   Studio Rosas

   COS'È
   L'unico posto dove un colore, una misura o un font hanno il diritto
   di essere scritti per esteso. Ogni altro file CSS del progetto deve
   riferirsi a questi valori con var(--nome), mai ripeterli.

   COME SI USA
   Va caricato PRIMA di qualunque altro foglio di stile:

       <link rel="stylesheet" href="css/tokens.css">
       <link rel="stylesheet" href="css/style.css">

   REGOLA
   Serve un valore che qui non c'è? Non lo si scrive nel componente:
   si aggiunge un token qui, e lo si documenta in DESIGN-SYSTEM.md.
   Il momento in cui si fa un'eccezione "solo per questa volta" è il
   momento in cui il sistema smette di esistere.

   COMPATIBILITÀ
   Questo file è ADDITIVO. Non tocca nessuna regola esistente e non
   sovrascrive le variabili già dichiarate in style.css e
   ordini-common.css: quei fogli si caricano dopo e vincono loro.
   Si può quindi mettere online senza rischi, prima ancora di aver
   convertito una sola pagina.
   ══════════════════════════════════════════════════════════════════ */


/* ==================================================================
   1. PRIMITIVE
   La materia prima. Non vanno usate direttamente nei componenti:
   servono a costruire i token semantici del blocco 2.
   Un componente che scrive var(--red-600) invece di var(--color-brand)
   non potrà mai essere ricolorato da un tema stagionale.
   ================================================================== */

:root {

    /* ── Rosso Rosas ────────────────────────────────────────────────
       Il 600 è il colore del marchio: #b90b10, già in uso ovunque.
       Gli altri gradini sono derivati per dargli un contesto. */
    --red-50:  #fdf3f3;
    --red-100: #fbe2e2;
    --red-300: #e8a0a2;
    --red-500: #d01218;
    --red-600: #b90b10;   /* ◄ marchio */
    --red-700: #900a0e;
    --red-800: #6d0709;

    /* ── Inchiostri (testi e superfici scure) ───────────────────── */
    --ink-900: #1a1c22;
    --ink-800: #272a33;   /* header e footer del sito */
    --ink-700: #3a3e4a;
    --ink-600: #555555;   /* testo corrente */
    --ink-500: #707070;   /* testo secondario — il piu' chiaro che regge 4.5:1 */
    --ink-400: #888888;   /* icone e dettagli, NON testo piccolo */
    --ink-300: #aaaaaa;
    --ink-200: #dddddd;
    --ink-100: #e8e8e8;
    --ink-50:  #f0f2f5;

    /* ── Bianchi e grigi chiari ────────────────────────────────── */
    --white:     #ffffff;
    --off-white: #fafafa;
    --paper:     #f9f9f9;

    /* ── Neutri caldi (area Scuole) ─────────────────────────────
       Una famiglia a parte, volutamente: l'area scolastica ha un
       carattere più caldo e cartaceo del resto del sito. */
    --warm-50:  #faf9f7;
    --warm-100: #ece7e0;
    --warm-200: #e5e0d8;
    --warm-600: #8a847a;   /* dettagli, NON testo piccolo */
    --warm-700: #6b665d;   /* testo secondario caldo (5.4:1) */

    /* ── Colori di stato ────────────────────────────────────────
       Comunicano un esito, mai un'appartenenza al marchio. */
    --green-300: #6fd4a8;   /* solo su fondo scuro */
    --green-500: #4caf82;   /* riempimenti, icone */
    --green-700: #3d9970;
    --green-800: #2f7a58;   /* testo su fondo chiaro (5.2:1) */

    --amber-300: #f0c060;   /* solo su fondo scuro */
    --amber-500: #f0a020;   /* riempimenti, icone */
    --amber-700: #d99a1c;
    --amber-800: #96610a;   /* testo su fondo chiaro (5.2:1) */

    --crimson-500: #c0392b;   /* errore: volutamente ≠ rosso marchio */

    --blue-300: #7baef8;
    --blue-500: #3874f0;
    --blue-700: #1a56d4;
    --blue-900: #25445f;      /* totali e importi */
}


/* ==================================================================
   2. TOKEN SEMANTICI — SUPERFICIE CHIARA (predefinita)
   Questi sono i nomi da usare nei componenti. Dicono a COSA serve
   il colore, non che colore è: è la proprietà che rende possibile
   un tema stagionale senza toccare una riga dei componenti.
   ================================================================== */

:root {

    /* ── Marchio ─────────────────────────────────────────────────── */
    --color-brand:        var(--red-600);
    --color-brand-hover:  var(--red-700);
    --color-brand-active: var(--red-800);
    --color-brand-soft:   var(--red-50);
    --color-brand-muted:  var(--red-300);
    --color-on-brand:     var(--white);   /* testo sopra il marchio */

    /* ── Superfici (dal fondo pagina all'elemento più in alto) ──── */
    --color-surface:      var(--paper);
    --color-surface-raised: var(--white);
    --color-surface-sunken: var(--ink-50);
    --color-surface-invert: var(--ink-800);

    /* ── Testo ───────────────────────────────────────────────────── */
    --color-text:         var(--ink-600);
    --color-heading:      var(--ink-800);
    --color-text-muted:   var(--ink-500);
    --color-text-invert:  var(--white);

    /* ── Bordi e separatori ─────────────────────────────────────── */
    --color-border:        var(--ink-100);
    --color-border-strong: var(--ink-200);

    /* ── Stati ────────────────────────────────────────────────────
       Ogni stato ha tre facce: testo, sfondo tenue, bordo. Bastano
       a costruire alert, badge e messaggi di validazione. */
    --color-success:        var(--green-800);
    --color-success-bg:     rgba(76, 175, 130, 0.10);
    --color-success-border: rgba(76, 175, 130, 0.30);

    --color-warning:        var(--amber-800);
    --color-warning-bg:     rgba(240, 160, 32, 0.10);
    --color-warning-border: rgba(240, 160, 32, 0.30);

    --color-danger:         var(--crimson-500);
    --color-danger-bg:      rgba(192, 57, 43, 0.08);
    --color-danger-border:  rgba(192, 57, 43, 0.25);

    --color-info:           var(--blue-700);
    --color-info-bg:        rgba(56, 116, 240, 0.08);
    --color-info-border:    rgba(56, 116, 240, 0.25);

    --color-amount:         var(--blue-900);   /* totali, prezzi finali */
}


/* ==================================================================
   3. TIPOGRAFIA
   ================================================================== */

:root {

    /* ── Famiglie ────────────────────────────────────────────────
       Due, e due soltanto. Playfair racconta, Poppins informa.
       Ogni terza famiglia che entra nel sito toglie carattere a
       queste due invece di aggiungerne. */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Consolas, monospace;

    /* ── Scala ───────────────────────────────────────────────────
       Nove gradini, rapporto ~1.2. Oggi il sito usa più di venti
       misure diverse fra 0.58rem e 2.6rem: differenze che nessuno
       percepisce come intenzionali, solo come sciatteria. */
    --text-2xs:  0.70rem;   /* etichette, note legali */
    --text-xs:   0.78rem;   /* didascalie, badge */
    --text-sm:   0.875rem;  /* testo secondario, form */
    --text-base: 1rem;      /* corpo */
    --text-lg:   1.125rem;  /* corpo in evidenza */
    --text-xl:   1.3rem;    /* h4 */
    --text-2xl:  1.6rem;    /* h3 */
    --text-3xl:  2rem;      /* h2 */
    --text-4xl:  2.6rem;    /* h1 */

    /* ── Pesi ───────────────────────────────────────────────────── */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Interlinee ─────────────────────────────────────────────── */
    --leading-tight:   1.15;   /* titoli grandi */
    --leading-snug:    1.35;   /* titoli piccoli */
    --leading-normal:  1.6;    /* corpo */
    --leading-relaxed: 1.8;    /* testi lunghi (privacy, termini) */

    /* ── Spaziatura fra lettere ─────────────────────────────────── */
    --tracking-tight: -0.02em;  /* titoli display */
    --tracking-wide:   0.08em;  /* etichette maiuscole */
}


/* ==================================================================
   4. SPAZIO
   Base 4px. Tutte le distanze del sito devono essere un gradino di
   questa scala: è ciò che fa sembrare "ordinata" una pagina anche a
   chi non saprebbe dire perché.
   ================================================================== */

:root {
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-24: 6rem;      /* 96px — stacco fra sezioni */

    /* ── Contenitori ────────────────────────────────────────────── */
    --width-prose: 68ch;    /* testo lungo leggibile */
    --width-page:  1300px;  /* .container attuale */
    --gutter:      var(--space-5);

    /* ── Area di tocco ───────────────────────────
       Il minimo sotto cui un bersaglio diventa difficile da colpire
       col pollice. Si applica come min-height/min-width, mai
       ingrandendo il testo. */
    --touch-target: 44px;
}


/* ==================================================================
   5. FORMA
   ================================================================== */

:root {

    /* ── Raggi ───────────────────────────────────────────────────
       Cinque, non dodici. Oggi convivono 2, 3, 4, 5, 6, 7, 8, 10,
       12 e 14 px senza che la differenza voglia dire niente. */
    --radius-sm:     4px;    /* input, badge */
    --radius-md:     8px;    /* bottoni, card */
    --radius-lg:     12px;   /* pannelli, modali */
    --radius-xl:     20px;   /* riquadri grandi, hero */
    --radius-pill:   999px;  /* pillole, tag */
    --radius-circle: 50%;    /* avatar, icone tonde */

    /* ── Ombre ───────────────────────────────────────────────────
       Una scala di altitudine: più un elemento è "in alto", più
       l'ombra è ampia e morbida. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);
    --shadow-brand: 0 4px 20px rgba(185, 11, 16, 0.35);   /* CTA in rilievo */

    /* ── Bordi ───────────────────────────────────────────────────── */
    --border-thin:  1px;
    --border-thick: 2px;
}


/* ==================================================================
   6. MOVIMENTO
   Il movimento serve a spiegare un cambiamento, non a decorarlo.
   Sopra i 400ms l'interfaccia comincia a sembrare lenta.
   ================================================================== */

:root {
    --duration-fast: 0.15s;   /* hover, focus */
    --duration-base: 0.25s;   /* apertura pannelli */
    --duration-slow: 0.4s;    /* transizioni di pagina, slideshow */

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* entrate */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* movimenti */

    --transition-color: color var(--duration-fast) var(--ease-out),
                        background-color var(--duration-fast) var(--ease-out),
                        border-color var(--duration-fast) var(--ease-out);
}

/* Chi ha chiesto meno animazioni al sistema operativo deve essere
   ascoltato: è un requisito di accessibilità, non una preferenza. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-slow: 0.01ms;
    }
}


/* ==================================================================
   7. LIVELLI (z-index)
   Una scala dichiarata evita il "z-index: 9999" che poi va superato
   con 10000. Se un elemento nuovo non trova posto qui, il problema
   è la struttura, non il numero.
   ================================================================== */

:root {
    --z-base:     1;
    --z-sticky:   100;   /* barre che seguono lo scorrimento */
    --z-header:   1000;  /* header del sito (valore già in uso) */
    --z-dropdown: 1100;  /* menu a tendina della nav */
    --z-overlay:  2000;  /* velo scuro */
    --z-modal:    2100;  /* modali, auth-modal */
    --z-toast:    3000;  /* notifiche */
}


/* ==================================================================
   8. SUPERFICIE SCURA
   I tre configuratori d'ordine (stampa, vintage, fotocuore) vivono
   su fondo scuro e non caricano style.css: sono un mondo a sé.
   Invece di duplicare il sistema, si rimappano i soli token
   semantici. I componenti scritti con i token del blocco 2
   funzionano in entrambi i mondi senza una riga di differenza.

   Uso:  <body class="superficie-scura">
   ================================================================== */

.superficie-scura {
    --color-surface:        var(--ink-900);
    --color-surface-raised: #252830;
    --color-surface-sunken: #14161b;
    --color-surface-invert: var(--white);

    --color-text:         #e8e4de;
    --color-heading:      var(--white);
    --color-text-muted:   rgba(232, 232, 232, 0.55);
    --color-text-invert:  var(--ink-900);

    --color-border:        rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Su fondo scuro i colori di stato vanno schiariti, o spariscono. */
    --color-success: var(--green-300);
    --color-warning: var(--amber-300);
    --color-info:    var(--blue-300);
    --color-danger:  #ff8b7d;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}


/* ==================================================================
   9. PONTE VERSO IL CODICE ESISTENTE
   Le variabili storiche, ridefinite in termini dei token nuovi.

   NON usarle nel codice nuovo: sono qui solo perché il giorno in cui
   un tema cambia --color-brand, anche le pagine non ancora convertite
   lo seguano. Spariranno quando l'ultimo file le avrà abbandonate.

   Nota: style.css e ordini-common.css ridichiarano questi nomi e si
   caricano dopo, quindi al momento vincono loro. Questo blocco entra
   in funzione man mano che quelle dichiarazioni vengono rimosse.
   ================================================================== */

:root {
    --primary:      var(--color-brand);
    --primary-dark: var(--color-brand-hover);
    --secondary:    var(--ink-800);
    --accent:       var(--red-500);
    --light:        var(--color-surface);
    --dark:         var(--color-heading);
    --text-gray:    var(--color-text);
    --shadow:       var(--shadow-lg);
    --radius:       var(--radius-sm);
    --font-main:    var(--font-body);
    --total-blue:   var(--color-amount);
}


/* ══ INIZIO BLOCCO GENERATO DAL PANNELLO ══
   Rigenerato da studiocms-76d13b/salva-design.php — NON modificare a mano:
   tutto cio' che sta fra i due marcatori viene riscritto al prossimo
   salvataggio dal pannello. I valori arrivano da
   studiocms-76d13b/config-design.php, che e' la vera fonte.
   Il resto di questo file resta scritto a mano ed e' al sicuro.
   Ultimo aggiornamento: 2026-08-21 18:22

   Nessuna personalizzazione attiva: il sito usa i valori di fabbrica.
   Fra i due marcatori non c'e' nessuna regola CSS, quindi questo
   blocco non puo' cambiare l'aspetto di niente.
   ══ */

/* ══ FINE BLOCCO GENERATO DAL PANNELLO ══ */