:root{    --gradient-amethyst-orange: linear-gradient(135deg, #BC3ACA 0%, #D946A8 50%, #FE5104 100%);
    --gradient-amethyst-orange-subtle: linear-gradient(135deg, rgba(188, 58, 202, 0.05), rgba(217, 70, 168, 0.04), rgba(254, 81, 4, 0.03));
    --gradient-amethyst-orange-light: linear-gradient(135deg, rgba(188, 58, 202, 0.12), rgba(217, 70, 168, 0.10), rgba(254, 81, 4, 0.08));
    --gradient-amethyst-orange-vibrant: linear-gradient(135deg, #BC3ACA 0%, #D946A8 50%, #FE5104 100%);

    /* ─── Sfumatura dell'intro (campionata da public/gradient-bg.webp, colonna al 90%) ───
     * Bande verticali: arancio → corallo → magenta → viola → magenta → rosso → arancio, bianco ai due capi.
     * L'hero usa l'immagine (rombo); tutto il resto usa queste stesse bande via .sfumatura-*. */
    --sfumatura-bande: linear-gradient(180deg, #ffffff 0%, #ffefe9 2%, #ff996c 12%, #f84761 25%, #e22f89 37%, #be37bd 50%, #e22f8b 62%, #f83f27 75%, #fecdb9 87%, #ffffff 100%);
    --sfumatura-filetto: linear-gradient(90deg, #ff996c, #f84761, #e22f89, #be37bd);

    /*
     * Semantic tokens — raw oklch channels (no wrapper).
     * Tailwind config applies: oklch(var(--token) / <alpha-value>)
     */

    /* ─── Surfaces ─── */
    --background: 1 0 0;
    --foreground: 0.1451 0.005 286;
    --card: 1 0 0;
    --card-foreground: 0.1451 0.005 286;
    --popover: 1 0 0;
    --popover-foreground: 0.1451 0.005 286;

    /* ─── Primary (Brand Viola #BC3ACA) ─── */
    --primary: 0.5945 0.2300 323.6855;
    --primary-foreground: 1 0 0;

    /* ─── Secondary (Arancione #FE5104) ─── */
    --secondary: 0.6701 0.2194 37.7283;
    --secondary-foreground: 1 0 0;

    /* ─── Muted ─── */
    --muted: 0.9654 0.005 286;
    --muted-foreground: 0.5556 0.015 286;

    /* ─── Accent (Fucsia #D946A8) ─── */
    --accent: 0.6307 0.2077 343.8083;
    --accent-foreground: 1 0 0;

    /* ─── Destructive (#B91C1C) ─── */
    --destructive: 0.5054 0.1905 27.5181;
    --destructive-foreground: 1 0 0;

    /* ─── Chrome ─── */
    --border: 0.9174 0.005 286;
    --input: 0.8716 0.005 286;
    --ring: 0.5945 0.2300 323.6855;

    /* ─── Charts ─── */
    --chart-1: 0.5945 0.2300 323.6855;
    --chart-2: 0.6307 0.2077 343.8083;
    --chart-3: 0.6701 0.2194 37.7283;
    --chart-4: 0.5054 0.1905 27.5181;
    --chart-5: 0.1451 0.005 286;

    /* ─── Sidebar ─── */
    --sidebar-background: 0.985 0.003 286;
    --sidebar-foreground: 0.1451 0.005 286;
    --sidebar-primary: 0.5945 0.2300 323.6855;
    --sidebar-primary-foreground: 1 0 0;
    --sidebar-accent: 0.9654 0.005 286;
    --sidebar-accent-foreground: 0.1451 0.005 286;
    --sidebar-border: 0.9174 0.005 286;
    --sidebar-ring: 0.5945 0.2300 323.6855;

    /* ─── Fonts / Radius / Spacing ─── */
    --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
    --font-serif: Georgia, serif;
    --font-mono: ui-monospace, monospace;
    --radius: 10px;
    /* Velo dei modali: un solo valore per dialog, sheet e lightbox (docs/research/dialog-overlay-2026-10.md) */
    --scrim: rgb(0 0 0 / 0.4);
    --tracking-normal: 0em;
    --spacing: 0.25rem;

    /* ─── Shadows ─── */
    --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 16px -2px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 16px 32px -4px rgba(0, 0, 0, 0.1), 0 8px 12px -4px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 24px 48px -8px rgba(0, 0, 0, 0.15);
}