/* ============================================================
   CardX — Theme CSS Custom Properties
   Palette affiliata a Rete Aniene (reteaniene.it)
   Font: Oswald (titoli), Barlow Semi Condensed (body)
   Sovrascrivibili da store branding o da theme-loader.js
   ============================================================ */

:root {
    /* ---------- Colori primari CardX / Rete Aniene ---------- */
    --cx-primary:        #D5D92F; /* Lime Rete Aniene */
    --cx-primary-rgb:    213, 217, 47;
    --cx-primary-hover:  #959814; /* Oliva scuro */
    --cx-secondary:      #2BA3C8; /* Blu Rete Aniene */
    --cx-secondary-rgb:  43, 163, 200;
    --cx-secondary-hover:#1e8aab;
    --cx-accent:         #FC3C3C; /* Rosso Rete Aniene */
    --cx-accent-rgb:     252, 60, 60;

    /* ---------- Dark tones (header, sidebar, auth bg) ---------- */
    --cx-dark:           #292929;
    --cx-dark-medium:    #3a3a3a;
    --cx-dark-light:     #4a4a4a;

    /* ---------- Colori semantici ---------- */
    --cx-success:        #2BA3C8;
    --cx-danger:         #FC3C3C;
    --cx-warning:        #D5D92F;
    --cx-info:           #2BA3C8;

    /* ---------- Sfondo e superfici ---------- */
    --cx-bg:             #f5f5f0; /* Warm off-white */
    --cx-surface:        #ffffff;
    --cx-surface-hover:  #f0f0eb;
    --cx-border:         #e0e0d8;

    /* ---------- Testo ---------- */
    --cx-text:           #292929;
    --cx-text-muted:     #707070;
    --cx-text-light:     #999999;
    --cx-text-on-primary:#292929; /* Testo scuro su sfondo lime */

    /* ---------- Tipografia ---------- */
    --cx-font-family:    'Barlow Semi Condensed', system-ui, -apple-system, sans-serif;
    --cx-font-heading:   'Oswald', system-ui, sans-serif;
    --cx-font-size-base: 1rem;
    --cx-font-size-sm:   0.875rem;
    --cx-font-size-xs:   0.75rem;
    --cx-font-size-lg:   1.125rem;
    --cx-font-size-xl:   1.25rem;
    --cx-font-size-2xl:  1.5rem;
    --cx-font-size-3xl:  1.875rem;

    /* ---------- Spaziatura ---------- */
    --cx-radius:         0.5rem;
    --cx-radius-sm:      0.375rem;
    --cx-radius-lg:      0.75rem;
    --cx-radius-full:    9999px;

    /* ---------- Ombre ---------- */
    --cx-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --cx-shadow:         0 2px 8px -2px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.08);
    --cx-shadow-md:      0 8px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
    --cx-shadow-lg:      0 16px 32px -8px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.06);

    /* ---------- Transizioni ---------- */
    --cx-transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --cx-transition-slow:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Sovrascrittura Bootstrap ---------- */
    --bs-primary:        var(--cx-primary);
    --bs-primary-rgb:    var(--cx-primary-rgb);
    --bs-body-font-family: var(--cx-font-family);
    --bs-body-bg:        var(--cx-bg);
    --bs-body-color:     var(--cx-text);
    --bs-border-radius:  var(--cx-radius);
    --bs-border-radius-lg: var(--cx-radius-lg);
}


/* ============================================================
   PWA Install Banner — Stili condivisi
   ============================================================ */

#cx-pwa-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 1rem;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
}

#cx-pwa-banner.cx-pwa-banner-show {
    transform: translateY(0);
    opacity: 1;
}

#cx-pwa-banner.cx-pwa-banner-hide {
    transform: translateY(100%);
    opacity: 0;
}

.cx-pwa-banner {
    max-width: 420px;
    margin: 0 auto;
    background: var(--cx-surface, #fff);
    border-radius: var(--cx-radius-lg, 0.75rem);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    border-top: 3px solid var(--cx-primary, #D5D92F);
}

.cx-pwa-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--cx-radius, 0.5rem);
    background: rgba(213, 217, 47, 0.12);
    color: var(--cx-primary-hover, #959814);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cx-pwa-banner-text {
    flex: 1;
    min-width: 0;
}

.cx-pwa-banner-text strong {
    display: block;
    font-family: var(--cx-font-heading, 'Oswald', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cx-text, #292929);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.cx-pwa-banner-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--cx-text-muted, #707070);
    line-height: 1.4;
    margin-top: 0.125rem;
}

.cx-pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cx-pwa-btn-install {
    background: var(--cx-primary, #D5D92F);
    color: var(--cx-dark, #292929);
    border: none;
    border-radius: var(--cx-radius, 0.5rem);
    padding: 0.5rem 1rem;
    font-family: var(--cx-font-heading, 'Oswald', sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.cx-pwa-btn-install:hover {
    background: var(--cx-primary-hover, #959814);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(213, 217, 47, 0.3);
}

.cx-pwa-btn-dismiss {
    background: none;
    border: none;
    color: var(--cx-text-light, #999);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--cx-radius-sm, 0.375rem);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cx-pwa-btn-dismiss:hover {
    color: var(--cx-text, #292929);
    background: rgba(0, 0, 0, 0.06);
}