/*
 * Design Tokens – alle CSS-Variablen des drinklist-Designsystems.
 * Wird von allen Feature-Seiten via <link> eingebunden.
 */

:root {
    --primary:        #8B5CF6;
    --primary-light:  #A78BFA;
    --primary-dark:   #6D28D9;
    --accent:         #F59E0B;
    --accent-light:   #FCD34D;
    --success:        #10B981;
    --bg:             #0D0520;
    --surface:        rgba(255,255,255,0.05);
    --surface-solid:  #180A30;
    --text:           #F0E6FF;
    --muted:          #9D80C0;
    --border:         rgba(139,92,246,0.25);
    --radius:         20px;
    --radius-sm:      14px;
    --glow:           0 0 32px rgba(139,92,246,0.35);
    --glow-accent:    0 0 32px rgba(245,158,11,0.35);
    --transition:     .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Base ──────────────────────────────────────── */
body {
    font-family: 'Nunito', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ── Shared Button Styles ──────────────────────── */
.btn {
    display: block;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    letter-spacing: 0.02em;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    color: #fff;
    box-shadow: 0 4px 24px rgba(139,92,246,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { box-shadow: 0 6px 32px rgba(139,92,246,0.65); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    padding: 12px;
}
.btn-ghost:hover { color: var(--text); }

/* ── Shared Card ───────────────────────────────── */
.card {
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--glow);
}

/* ── Copy Button ───────────────────────────────── */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(139,92,246,0.2);
    color: var(--primary-light);
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.copy-btn:hover { background: rgba(139,92,246,0.35); }

/* ── Error / Loading ───────────────────────────── */
.error-msg {
    display: none;
    color: #FC8181;
    font-size: 14px;
    margin-top: 14px;
    text-align: center;
    font-weight: 700;
    padding: 12px;
    background: rgba(239,68,68,0.1);
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,0.25);
}