/* =====================================================================
   FrolliAMOci — Design tokens
   Lomazzi Federico (c) 2026 — https://lomazzifederico.it

   L'identità visiva dell'intera app si governa da QUI.
   Il grafico interviene su questi valori; i componenti li consumano.
   ===================================================================== */

@font-face {
    font-family: "FrolliamociUI";
    src: url("../fonts/nunito-latin-var.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    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: "FrolliamociUI";
    src: url("../fonts/nunito-latin-ext-var.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    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;
}

:root {
    /* ---- Palette: avorio caldo · cacao · caramello · corallo affettivo · pastelli ---- */
    --color-bg:              #FBF3EA;   /* avorio caldo */
    --color-bg-deep:         #F5E6D6;
    --color-surface:         #FFFAF5;   /* card */
    --color-surface-alt:     #F8EADF;   /* card pasticceria */
    --color-surface-glass:   rgba(255, 250, 245, 0.92);

    --color-text:            #3E2016;   /* cacao profondo */
    --color-text-muted:      #7A5A4C;
    --color-text-inverse:    #FFF8F1;

    --color-primary:         #5C2E1C;   /* CTA cacao */
    --color-primary-hover:   #4A2416;
    --color-primary-contrast:#FFF6EE;

    --color-accent:          #E8445A;   /* corallo "AMO": decorativo */
    --color-accent-strong:   #C22E44;   /* corallo per TESTO (contrasto AA) */
    --color-caramel:         #D98A3D;
    --color-caramel-strong:  #9A5418;
    --color-success:         #3E8E5A;
    --color-warning:         #B7791F;
    --color-danger:          #B42335;

    --color-border:          rgba(92, 46, 28, 0.09);
    --color-border-strong:   rgba(92, 46, 28, 0.18);
    --color-focus:           #C22E44;
    --color-overlay:         rgba(40, 18, 10, 0.45);

    /* pastelli per le tile funzione */
    --tint-rose:     #FCE3E7;
    --tint-blush:    #FDE9E3;
    --tint-butter:   #FCF1DD;
    --tint-caramel:  #F8E3CB;
    --tint-peach:    #FDE7D6;
    --tint-heart:    #FBE0DC;

    /* ---- Tipografia ---- */
    --font-ui: "FrolliamociUI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.875rem;   /* 14 */
    --fs-md:   1rem;       /* 16 */
    --fs-lg:   1.125rem;   /* 18 */
    --fs-xl:   1.375rem;   /* 22 */
    --fs-2xl:  1.75rem;    /* 28 */
    --fs-hero: clamp(1.6rem, 1.05rem + 2.6vw, 2.9rem);
    --fw-regular: 500;
    --fw-bold: 700;
    --fw-heavy: 800;
    --lh-tight: 1.15;
    --lh-base: 1.45;

    /* ---- Spaziature ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --page-gutter: clamp(10px, 3.2vw, 24px);

    /* ---- Raggi ---- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    /* livelli (z-index) dei decori: i Temi stagionali (v1.30) stanno sopra il contenuto ma sotto menu laterale (30),
       barra di navigazione (40), avvisi (60) e finestre (<dialog>, livello superiore del browser) */
    --z-seasonal: 25;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ---- Ombre (discrete, niente anni 2010) ---- */
    --shadow-card: 0 1px 2px rgba(74, 38, 24, 0.05), 0 8px 20px -12px rgba(74, 38, 24, 0.22);
    --shadow-raised: 0 2px 4px rgba(74, 38, 24, 0.06), 0 16px 32px -16px rgba(74, 38, 24, 0.32);
    --shadow-nav: 0 -6px 24px -12px rgba(74, 38, 24, 0.22);

    /* ---- Movimento ---- */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 250ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Layout ---- */
    --header-h: 68px;
    --bottom-nav-h: 64px;
    --sidebar-w: 260px;
    --content-max: 1180px;
    --touch-min: 44px;
    --touch-cta: 48px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}