/**
 * Lupad Music Guild — Global Plugin Styles
 * Shared CSS variables and resets used by both auth and dashboard pages.
 *
 * Phase 5 (Theme) will expand the full design system.
 * These variables keep auth/dashboard consistent with the theme colors.
 */

:root {
    /* Brand Colors */
    --lupad-gold:          #C9A84C;
    --lupad-gold-light:    #E8C97A;
    --lupad-gold-dark:     #A8872A;

    --lupad-navy:          #0D0B1E;
    --lupad-navy-mid:      #1A1535;
    --lupad-purple:        #4B2D8F;
    --lupad-purple-mid:    #6B4DB5;
    --lupad-blue:          #2D5BE3;
    --lupad-green:         #2DB87A;

    --lupad-white:         #FFFFFF;
    --lupad-gray-100:      #F7F7FA;
    --lupad-gray-200:      #EDEDF2;
    --lupad-gray-300:      #D1D0DC;
    --lupad-gray-500:      #8A8898;
    --lupad-gray-700:      #4A4860;
    --lupad-gray-900:      #1E1C30;

    /* Gradients */
    --lupad-gradient-hero: linear-gradient(135deg, #0D0B1E 0%, #2D1A6B 50%, #1A4A2E 100%);
    --lupad-gradient-btn:  linear-gradient(135deg, #C9A84C 0%, #E8C97A 100%);
    --lupad-gradient-card: linear-gradient(180deg, #1A1535 0%, #0D0B1E 100%);

    /* Typography */
    --lupad-font:          'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --lupad-radius:        8px;
    --lupad-radius-lg:     16px;
    --lupad-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
    --lupad-shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.16);

    /* Status Colors */
    --lupad-status-active:  #2DB87A;
    --lupad-status-trial:   #C9A84C;
    --lupad-status-expired: #E84C4C;
    --lupad-status-pending: #8A8898;
}

/* ── Base Reset ──────────────────────────────────────────────────── */

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

.lupad-wrap {
    font-family: var(--lupad-font);
    color: var(--lupad-gray-900);
    line-height: 1.6;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.lupad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--lupad-radius);
    font-family: var(--lupad-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.lupad-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.lupad-btn:active {
    transform: translateY(0);
}

.lupad-btn--gold {
    background: var(--lupad-gradient-btn);
    color: var(--lupad-navy);
}

.lupad-btn--purple {
    background: var(--lupad-purple);
    color: var(--lupad-white);
}

.lupad-btn--outline {
    background: transparent;
    border: 2px solid var(--lupad-gold);
    color: var(--lupad-gold);
}

.lupad-btn--full {
    width: 100%;
}

.lupad-btn:disabled,
.lupad-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── Form Elements ───────────────────────────────────────────────── */

.lupad-field {
    margin-bottom: 16px;
}

.lupad-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lupad-gray-700);
    margin-bottom: 6px;
}

.lupad-field input,
.lupad-field textarea,
.lupad-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--lupad-gray-300);
    border-radius: var(--lupad-radius);
    font-family: var(--lupad-font);
    font-size: 14px;
    color: var(--lupad-gray-900);
    background: var(--lupad-white);
    transition: border-color 0.2s ease;
    outline: none;
}

.lupad-field input:focus,
.lupad-field textarea:focus {
    border-color: var(--lupad-purple);
    box-shadow: 0 0 0 3px rgba(75, 45, 143, 0.12);
}

.lupad-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Notices ─────────────────────────────────────────────────────── */

.lupad-notice {
    padding: 12px 16px;
    border-radius: var(--lupad-radius);
    font-size: 14px;
    margin-bottom: 16px;
}

.lupad-notice--success {
    background: #EAF7F1;
    color: #1A7A4A;
    border-left: 4px solid var(--lupad-green);
}

.lupad-notice--error {
    background: #FEF0F0;
    color: #C0392B;
    border-left: 4px solid #E84C4C;
}

.lupad-notice--info {
    background: #EEF1FD;
    color: #2D5BE3;
    border-left: 4px solid var(--lupad-blue);
}

/* ── Status Badges ───────────────────────────────────────────────── */

.lupad-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.lupad-status--active  { background: rgba(45, 184, 122, 0.15); color: #1A8A5A; }
.lupad-status--trial   { background: rgba(201, 168, 76, 0.15);  color: #8A6820; }
.lupad-status--expired { background: rgba(232, 76, 76, 0.15);   color: #C0392B; }
.lupad-status--pending { background: rgba(138, 136, 152, 0.15); color: #5A5870; }

/* ── Loading Spinner ─────────────────────────────────────────────── */

.lupad-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lupad-spin 0.7s linear infinite;
}

@keyframes lupad-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive helpers ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .lupad-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .lupad-hide-desktop { display: none !important; }
}