/* ══════════════════════════════════════════════════════════════════
   TUBINO — Design Tokens
   Sistema centralizzato di variabili CSS per il design system.
   Tutte le decisioni visive (colori, spaziature, tipografia, ecc.)
   sono definite qui e usate in tutto il progetto.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Colori ─────────────────────────────────────────────────── */

    /* Palette primaria */
    --color-black:          #000000;
    --color-white:          #ffffff;
    --color-accent:         #1d1d1f;
    --color-accent-hover:   #3a3a3c;

    /* Sfondo */
    --color-bg:             #000000;
    --color-bg-light:       #fbfbfd;
    --color-bg-gray:        #f4f4f4;
    --color-bg-dark:        #1d1d1f;

    /* Testo */
    --color-text:           #1d1d1f;
    --color-text-light:     #86868b;
    --color-text-muted:     #444444;
    --color-text-inverse:   #ffffff;

    /* Bordi */
    --color-border:         rgba(0, 0, 0, 0.08);
    --color-border-light:   #e0e0e0;
    --color-border-dark:    rgba(255, 255, 255, 0.15);

    /* Feedback */
    --color-success:        #34c759;
    --color-warning:        #ffc107;
    --color-error:          #d32f2f;
    --color-error-dark:     #b71c1c;

    /* Brand page (scuri — usati nelle sezioni a tema nero) */
    --color-brand-gray:     #999999;
    --color-brand-gray-mid: #aaaaaa;
    --color-brand-gray-dark:#666666;
    --color-brand-gray-text:#cccccc;

    /* Glass / Overlay */
    --color-glass-light:    rgba(255, 255, 255, 0.08);
    --color-glass-border:   rgba(255, 255, 255, 0.12);
    --color-glass-bg:       rgba(255, 255, 255, 0.35);
    --color-overlay-bg:     rgba(0, 0, 0, 0.55);

    /* ── Tipografia ────────────────────────────────────────────── */

    --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font weight scale */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semi:     600;
    --fw-bold:     700;
    --fw-heavy:    800;
    --fw-black:    900;

    /* Font size scale (fluid) */
    --text-xs:     0.72rem;    /* 11.5px — disclaimer, nicotine bar */
    --text-sm:     0.82rem;    /* 13px   — label, caption */
    --text-base:   0.95rem;    /* 15px   — body, button */
    --text-md:     1.05rem;    /* 17px   — card title, link */
    --text-lg:     1.15rem;    /* 18px   — card name */
    --text-xl:     1.35rem;    /* 22px   — subtitle */
    --text-2xl:    1.6rem;     /* 26px   — modal title */

    /* Heading scale (fluid con clamp) */
    --heading-sm:  clamp(1.8rem, 4vw, 2.8rem);
    --heading-md:  clamp(2rem, 4vw, 3.2rem);
    --heading-lg:  clamp(2.5rem, 6vw, 4rem);
    --heading-xl:  clamp(3rem, 8vw, 5.5rem);

    /* Line heights */
    --leading-tight:   1.05;
    --leading-snug:    1.15;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;
    --leading-loose:   1.8;

    /* Letter spacing */
    --tracking-tight:   -0.04em;
    --tracking-snug:    -0.03em;
    --tracking-normal:  -0.01em;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.1em;
    --tracking-widest:   0.2em;

    /* ── Spaziature ────────────────────────────────────────────── */

    /* Scala base 4px */
    --space-1:     4px;
    --space-2:     8px;
    --space-3:     12px;
    --space-4:     16px;
    --space-5:     20px;
    --space-6:     24px;
    --space-8:     32px;
    --space-10:    40px;
    --space-12:    48px;
    --space-16:    64px;
    --space-20:    80px;
    --space-24:    96px;
    --space-32:    128px;

    /* Semantiche */
    --section-padding:    clamp(80px, 10vw, 160px);
    --section-padding-md: clamp(48px, 7vw, 80px);
    --section-padding-sm: clamp(32px, 5vw, 56px);
    --container-max:      1200px;
    --header-height:   58px;
    --gutter:          24px;

    /* ── Border Radius ─────────────────────────────────────────── */

    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   28px;
    --radius-pill:  980px;   /* pill / full round */
    --radius-round: 50%;
    --radius-circle: 50%;   /* cerchio perfetto */

    /* ── Ombre ─────────────────────────────────────────────────── */

    --shadow-xs:    0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 4px 18px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg:    0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-xl:    0 24px 80px rgba(0, 0, 0, 0.25);

    /* Glass shadows (per card glassmorphism) */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* ── Transizioni ───────────────────────────────────────────── */

    /* Easing */
    --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Durate */
    --duration-fast:    0.2s;
    --duration-normal:  0.3s;
    --duration-slow:    0.5s;
    --duration-slower:  0.7s;

    /* Transizioni predefinite */
    --transition-fast:   all 0.2s var(--ease-out);
    --transition-base:   all 0.3s var(--ease-out);
    --transition-smooth: all 0.35s var(--ease-spring);
    --transition-slow:   all 0.5s var(--ease-smooth);

    /* ── Z-index scala ─────────────────────────────────────────── */

    --z-below:       -1;
    --z-base:         0;
    --z-above:        1;
    --z-sticky:       100;
    --z-header:       1000;
    --z-header-nav:   1001;
    --z-overlay:      9999;
    --z-modal:        10000;

    /* ── Breakpoints (riferimento — usati via @media) ──────────── */
    /* sm:  480px  — telefoni grandi                               */
    /* md:  768px  — tablet, passaggio desktop nav                 */
    /* lg:  1024px — laptop                                        */
    /* xl:  1200px — desktop (container-max)                       */
}