/* =====================================================================
   NMP Design Tokens — dark-glass verde sobrio
   Brand-coherent con landing pubblica nomorepaper.it
   ---------------------------------------------------------------------
   Single source of truth per palette/spacing/radius/elevation usati
   da marketplace (shop/*), customerapps (qrcart, dining, waiter, kds,
   account, inventory) e pagine ordine (take-away, delivery, table,
   scan&go).

   Import: ogni stylesheet che usa i token deve essere caricato DOPO
   questo file. Caricalo come primo CSS nel <head>.
   ===================================================================== */

:root {
    /* ─── Fondi scuri ───────────────────────────────────────────── */
    --nmp-bg-dark:        #0a0e0a;      /* nero-verde profondo (root bg) */
    --nmp-bg-deep:        #0f1a0d;      /* sezione scura */
    --nmp-bg-elevated:    #14241a;      /* card su fondo, leggermente più chiara */

    /* ─── Verdi brand (palette nomorepaper.it landing) ──────────── */
    --nmp-green-dark:     #175206;      /* primary scuro (hamburger landing) */
    --nmp-green:          #488831;      /* primary (link, CTA secondari, menu overlay) */
    --nmp-green-soft:     #6dbf4a;      /* hover, accent vivace */
    --nmp-green-glow:     #a3ff7e;      /* highlight neon (rare, focus state) */
    --nmp-green-wash:     rgba(72,136,49,.10);     /* fondo molto tenue, hint */
    --nmp-green-wash-2:   rgba(72,136,49,.20);     /* hover wash */

    /* ─── Glassmorphism (card + overlay) ────────────────────────── */
    --nmp-glass:          rgba(255,255,255,.06);   /* card glass base */
    --nmp-glass-hover:    rgba(255,255,255,.10);   /* card glass hover */
    --nmp-glass-strong:   rgba(255,255,255,.14);   /* modal/popover */
    --nmp-border:         rgba(255,255,255,.12);
    --nmp-border-strong:  rgba(255,255,255,.22);
    --nmp-border-green:   rgba(109,191,74,.45);    /* bordo verde su hover */

    /* ─── Testi ─────────────────────────────────────────────────── */
    --nmp-text:           #ffffff;
    --nmp-text-mute:      rgba(255,255,255,.72);
    --nmp-text-dim:       rgba(255,255,255,.52);
    --nmp-text-on-light:  #14241a;       /* testo su fondo chiaro (raro) */

    /* ─── Stati ─────────────────────────────────────────────────── */
    --nmp-success:        #22c55e;
    --nmp-warning:        #f59e0b;
    --nmp-danger:         #ef4444;
    --nmp-info:           #38bdf8;

    /* ─── Spacing scale ─────────────────────────────────────────── */
    --nmp-space-1:        4px;
    --nmp-space-2:        8px;
    --nmp-space-3:        12px;
    --nmp-space-4:        16px;
    --nmp-space-5:        24px;
    --nmp-space-6:        32px;
    --nmp-space-7:        48px;

    /* ─── Radii ─────────────────────────────────────────────────── */
    --nmp-radius-sm:      6px;
    --nmp-radius:         10px;          /* default (allineato a landing) */
    --nmp-radius-lg:      14px;
    --nmp-radius-xl:      20px;
    --nmp-radius-pill:    999px;

    /* ─── Elevation (shadow) ────────────────────────────────────── */
    --nmp-shadow-sm:      0 2px 6px rgba(0,0,0,.30);
    --nmp-shadow:         0 6px 20px rgba(0,0,0,.45);
    --nmp-shadow-lg:      0 14px 40px rgba(0,0,0,.55);
    --nmp-glow-green:     0 0 0 1px var(--nmp-border-green), 0 0 18px rgba(109,191,74,.25);

    /* ─── Typography ────────────────────────────────────────────── */
    --nmp-font:           'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --nmp-font-size:      16px;
    --nmp-line-height:    1.5;

    /* ─── Gradients ─────────────────────────────────────────────── */
    --nmp-gradient-hero:  linear-gradient(135deg, #0a0e0a 0%, #0f1a0d 45%, #175206 100%);
    --nmp-gradient-card:  linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);

    /* ─── Misc ──────────────────────────────────────────────────── */
    --nmp-blur:           saturate(140%) blur(10px);
    --nmp-transition:     200ms cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   Reset minimale + body branding (root)
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    min-height: 100%;
    overflow-x: hidden;       /* anti overflow orizzontale globale */
    max-width: 100%;
}

body {
    margin: 0;
    font-family: var(--nmp-font);
    font-size: var(--nmp-font-size);
    line-height: var(--nmp-line-height);
    color: var(--nmp-text);
    background: var(--nmp-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--nmp-green-soft); text-decoration: none; transition: color var(--nmp-transition); }
a:hover { color: var(--nmp-green-glow); }

::selection { background: var(--nmp-green); color: #fff; }

/* =====================================================================
   Utility componenti riusabili
   ===================================================================== */

/* Card glass (per box categorie / shop card / vetrine) */
.nmp-card {
    background: var(--nmp-glass);
    backdrop-filter: var(--nmp-blur);
    -webkit-backdrop-filter: var(--nmp-blur);
    border: 1px solid var(--nmp-border);
    border-radius: var(--nmp-radius);
    box-shadow: var(--nmp-shadow-sm);
    transition: border-color var(--nmp-transition),
                background var(--nmp-transition),
                transform var(--nmp-transition),
                box-shadow var(--nmp-transition);
}
.nmp-card:hover {
    background: var(--nmp-glass-hover);
    border-color: var(--nmp-border-green);
    transform: translateY(-2px);
    box-shadow: var(--nmp-shadow);
}

/* Bottoni primari (CTA forti) */
.nmp-btn-primary {
    background: var(--nmp-green);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    border-radius: var(--nmp-radius);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--nmp-transition), transform var(--nmp-transition);
}
.nmp-btn-primary:hover { background: var(--nmp-green-soft); transform: translateY(-1px); }
.nmp-btn-primary:active { transform: translateY(0); }

/* Bottoni outline (CTA secondaria) */
.nmp-btn-outline {
    background: transparent;
    color: var(--nmp-green-soft);
    border: 1px solid var(--nmp-border-green);
    padding: 11px 21px;
    border-radius: var(--nmp-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--nmp-transition), color var(--nmp-transition);
}
.nmp-btn-outline:hover { background: var(--nmp-green-wash-2); color: var(--nmp-green-glow); }

/* Chip / badge */
.nmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--nmp-green-wash);
    color: var(--nmp-green-soft);
    border: 1px solid var(--nmp-border-green);
    border-radius: var(--nmp-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

/* Sezione hero scura con gradient brand */
.nmp-section-hero {
    background: var(--nmp-gradient-hero);
    color: var(--nmp-text);
    padding: 56px 20px 44px;
    text-align: center;
}

/* Input dark-glass */
.nmp-input {
    background: var(--nmp-glass);
    color: var(--nmp-text);
    border: 1px solid var(--nmp-border);
    border-radius: var(--nmp-radius);
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color var(--nmp-transition), background var(--nmp-transition);
}
.nmp-input::placeholder { color: var(--nmp-text-dim); }
.nmp-input:focus {
    outline: none;
    border-color: var(--nmp-green-soft);
    background: var(--nmp-glass-hover);
    box-shadow: 0 0 0 3px rgba(109,191,74,.15);
}

/* Muted helper */
.nmp-muted { color: var(--nmp-text-mute); }
.nmp-dim   { color: var(--nmp-text-dim); }