/* =====================================================================
 * VIVI IN DUE — Design Tokens v2 (single source of truth)
 *
 * Namespace --vid-* introdotto per consolidare il design system.
 * Coesiste temporaneamente con --rd-* (redesign.css) e --gold (style.css)
 * legacy: stessi valori → zero pixel-difference user-facing.
 *
 * Regola: nuovi componenti DEVONO usare solo --vid-*. Migrazione graduale
 * dei vecchi nei PR successivi.
 * ===================================================================== */

:root {
    /* ---------- COLOR — Brand ---------- */
    --vid-ink: #0f172a;
    --vid-ink-soft: #1e293b;
    --vid-ink-2: #2c3e50;
    --vid-muted: #64748b;
    --vid-muted-2: #94a3b8;

    --vid-bg: #faf8f5;
    --vid-surface: #ffffff;
    --vid-surface-2: #f1f5f9;

    --vid-border: rgba(15, 23, 42, 0.08);
    --vid-border-strong: rgba(15, 23, 42, 0.14);

    /* ---------- COLOR — Accent ---------- */
    --vid-gold: #c79a3a;
    --vid-gold-soft: #e8d8a3;
    --vid-gold-text: #7d5d12;        /* WCAG AA 4.5:1 su --vid-bg (PR1 fix) */
    --vid-coral: #ee6c4d;

    /* ---------- COLOR — Semantic ---------- */
    --vid-success: #16a34a;
    --vid-success-soft: #dcfce7;
    --vid-warning: #f59e0b;          /* alias rating */
    --vid-danger: #dc2626;
    --vid-rating: #f59e0b;

    /* ---------- TYPOGRAPHY ---------- */
    --vid-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vid-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --vid-text-xs:   0.72rem;        /* 11.5px - micro label, meta */
    --vid-text-sm:   0.85rem;        /* 13.6px - secondary body */
    --vid-text-base: 1rem;           /* 16px   - body */
    --vid-text-lg:   1.125rem;       /* 18px   - card title */
    --vid-text-xl:   1.35rem;        /* 21.6px - section title */
    --vid-text-2xl:  1.6rem;         /* 25.6px - view title */
    --vid-text-3xl:  2rem;           /* 32px   - hero subtitle */
    --vid-text-hero: 2.75rem;        /* 44px   - hero counter */

    --vid-lh-tight:  1.15;
    --vid-lh-snug:   1.3;
    --vid-lh-normal: 1.5;
    --vid-lh-loose:  1.65;

    --vid-tracking-tight:  -0.02em;
    --vid-tracking-normal: 0;
    --vid-tracking-wide:   0.06em;
    --vid-tracking-widest: 0.12em;   /* wordmark VIVI IN DUE */

    /* ---------- SPACING (4pt scale) ---------- */
    --vid-s-1:  4px;
    --vid-s-2:  8px;
    --vid-s-3:  12px;
    --vid-s-4:  16px;
    --vid-s-5:  20px;
    --vid-s-6:  24px;
    --vid-s-8:  32px;
    --vid-s-10: 40px;
    --vid-s-12: 48px;
    --vid-s-16: 64px;
    --vid-s-20: 80px;

    /* ---------- RADIUS ---------- */
    --vid-radius-xs:   6px;
    --vid-radius-sm:   10px;
    --vid-radius-md:   16px;
    --vid-radius-lg:   22px;
    --vid-radius-xl:   28px;
    --vid-radius-pill: 999px;

    /* ---------- SHADOW (ink-tinted, soft) ---------- */
    --vid-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --vid-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --vid-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --vid-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
    --vid-shadow-gold: 0 8px 24px rgba(199, 154, 58, 0.28);

    /* ---------- MOTION ---------- */
    --vid-dur-instant:  0.12s;       /* tap/press feedback */
    --vid-dur-quick:    0.18s;       /* hover, chip toggle */
    --vid-dur-base:     0.22s;       /* nav item, color */
    --vid-dur-standard: 0.28s;       /* nav indicator, view transition */
    --vid-dur-slow:     0.45s;       /* modal open, content reveal */
    --vid-dur-pulse:    2s;          /* hero pulse */

    --vid-ease:         cubic-bezier(0.22, 1, 0.36, 1);  /* default snappy */
    --vid-ease-in-out:  cubic-bezier(0.65, 0.05, 0.35, 1);
    --vid-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --vid-ease-snappy:  cubic-bezier(0.32, 0.72, 0, 1);

    /* ---------- LAYOUT ---------- */
    --vid-container-max: 480px;      /* mobile-app feel, capped on tablet+ */
    --vid-header-h: 56px;
    --vid-nav-h: 64px;
}

/* Dark mode parziale rimosso: invertiva --vid-ink (da #0f172a a #f3f4f6)
 * facendo collassare il gradient della tessera in un chiaro illeggibile
 * col testo bianco sopra. Tema chiaro unico per l'intera app. */