/* ========================================================
   TINY TEMPLE TOOLBOX - TOKENS
   Variabili e font condivisi da tutte le pagine della Toolbox.
   Stessa identita' visiva della vetrina (tinytemplestudio.it),
   ricreata qui perche' su Cloudflare Pages con root "toolbox/"
   non si puo' condividere lo style.css della vetrina (origin
   diverso). Font self-hosted, copie 1:1 in assets/fonts/
   (licenze OFL-*.txt e LICENSE-Charter.txt). Nessuna richiesta
   verso Google.
   Ordine di caricamento: tokens.css -> base.css -> components.css.
   ======================================================== */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/archivo-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/archivo-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/archivo-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/archivo-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/archivo-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/archivo-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La & disegnata a mano (vedi style.css della vetrina): un solo
   glifo, usato solo per quel carattere via unicode-range. */
@font-face {
    font-family: 'TT Ampersand';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/tiny-ampersand.woff') format('woff');
    unicode-range: U+0026;
    size-adjust: 102%;
}

/* --- VARIABILI (identiche alla vetrina) --- */
:root {
    --bg-color: #080808;
    --text-primary: #e6e6e6;
    --text-muted: #a09085;
    --accent-brown: #4a3b32;
    --accent-orange: #cf5c36;

    --font-title: 'TT Ampersand', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-text: 'TT Ampersand', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);

    /* Safe-area: standalone su iPhone (notch, home indicator). */
    --tb-safe-t: env(safe-area-inset-top, 0px);
    --tb-safe-r: env(safe-area-inset-right, 0px);
    --tb-safe-b: env(safe-area-inset-bottom, 0px);
    --tb-safe-l: env(safe-area-inset-left, 0px);

    /* Vetro (spec 02 §6): stessa ricetta di .floating-btn nello style.css
       della vetrina (presa con grep, non reinventata). Riusata da tb-logo,
       tb-settings e tb-tile: nomi generici, senza riferimenti a Toolbox,
       pronti per essere riusati da un altro sottodominio senza modifiche. */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(18, 18, 18, 0.45) 100%);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-border-top: rgba(255, 255, 255, 0.35);
    --glass-blur: blur(25px) saturate(200%);
    --glass-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.4);

    /* Set componenti tb-* (spec 03 §1): raggi, spaziature, area di tocco
       minima, gradiente/ombre dei bottoni pieni, superfici e traccia dei
       controlli, durate delle transizioni. I componenti in components.css
       usano SOLO questi token (piu' --accent-, --text- e --glass- qui
       sopra): nessun colore scritto a mano li' dentro. */
    /* Raggi (feedback Genna, "stile Instagram 2026"): pillole piene per i
       controlli interattivi (--r-pill), scala crescente per superfici via
       via piu' grandi. Mai sotto 12px (--r-sm) tranne i tick della rotella
       (grafici, non un componente). */
    --r-pill: 999px;
    --r-xl: 28px;
    --r-lg: 24px;
    --r-pop: 20px;
    --r-md: 16px;
    --r-sm: 12px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --tap: 44px;
    --grad-accent: linear-gradient(135deg, #e07048 0%, #cf5c36 55%, #b64d2c 100%);
    --shadow-btn: 0 10px 24px rgba(207, 92, 54, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    --shadow-pop: var(--glass-shadow);
    --surface-1: rgba(255, 255, 255, 0.04);
    --track: rgba(255, 255, 255, 0.12);
    --dur-fast: 0.18s;
    --dur-med: 0.3s;
}