/**
 * Watchies Design System - Tell Me & Hero
 * Token centralizzati per coerenza UI (Guarda ora, Consigli, Trailer)
 * Modifiche: un solo file per aggiornare lo stile ovunque
 */

:root {
    /* Card */
    --tell-me-card-radius: 12px;
    --tell-me-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    --tell-me-card-padding: 16px;
    --tell-me-card-gap: 12px;
    --tell-me-card-bg: rgba(255, 255, 255, 0.04);
    --tell-me-card-border: rgba(255, 255, 255, 0.08);

    /* Watchies green – famiglia: #00c896, #00b585, #19d38a (evitare #34C759 iOS) */
    --watchies-green-primary: #19d38a;
    --watchies-green-hover: #14b874;
    --watchies-green-soft: rgba(25, 211, 138, 0.18);
    --watchies-green-border: rgba(25, 211, 138, 0.35);

    /* CTA primaria (Continua, Guarda, Play) */
    --tell-me-cta-primary: var(--watchies-green-primary);
    --tell-me-cta-primary-hover: var(--watchies-green-hover);

    /* CTA secondaria (Salva, Aggiungi, Scopri) */
    --tell-me-cta-secondary-bg: var(--watchies-green-soft);
    --tell-me-cta-secondary-border: var(--watchies-green-border);
    --tell-me-cta-secondary-hover-bg: rgba(25, 211, 138, 0.28);

    /* Spaziatura sezioni */
    --tell-me-section-spacing: 24px;
}

/* Utility: CTA secondaria con hover da design system */
a.cta-secondary-design:hover {
    background: var(--tell-me-cta-secondary-hover-bg) !important;
    border-color: var(--tell-me-cta-secondary-border) !important;
}

/* Sezione In arrivo: bottone ▶ Guarda – stile Netflix / streaming app */
.upcoming-trailer-cta {
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.upcoming-trailer-cta:hover {
    transform: translateY(-2px);
}