/* ==========================================================================
   Shared dark glass design system — proposal / birthday / period-tracker / chat
   ========================================================================== */

:root {
    --bg-0: #060814;
    --bg-1: #0a0e1f;
    --bg-2: #0d1226;

    --glass: rgba(255, 255, 255, 0.045);
    --glass-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-strong: rgba(255, 255, 255, 0.16);

    --text-1: #eef1f8;
    --text-2: #a3aecb;
    --text-3: #6b7794;

    --accent: #7c6cf6;
    --accent-2: #22d3ee;
    --accent-warm: #f5a623;
    --accent-rose: #f0568c;

    --grad-accent: linear-gradient(135deg, #6d5bf5 0%, #b45cf0 100%);
    --grad-accent-soft: linear-gradient(135deg, rgba(109, 91, 245, 0.25) 0%, rgba(180, 92, 240, 0.25) 100%);
    --grad-cyan: linear-gradient(135deg, #22d3ee 0%, #6d5bf5 100%);
    --grad-warm: linear-gradient(135deg, #f5a623 0%, #f0568c 100%);

    --success: #34d399;
    --danger: #f56565;
    --warn: #f5a623;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --shadow-glass: 0 20px 50px rgba(0, 0, 0, 0.55);
    --shadow-glass-sm: 0 10px 26px rgba(0, 0, 0, 0.45);
    --shadow-glow-accent: 0 0 32px rgba(124, 108, 246, 0.35);

    --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Base backdrop shared by every page */
body.theme-dark {
    font-family: var(--font-sans);
    color: var(--text-1);
    background:
        radial-gradient(1100px 700px at 12% -6%, rgba(124, 108, 246, 0.22), transparent 60%),
        radial-gradient(900px 620px at 100% 0%, rgba(34, 211, 238, 0.14), transparent 55%),
        radial-gradient(1000px 800px at 90% 100%, rgba(180, 92, 240, 0.16), transparent 60%),
        linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
    min-height: 100vh;
}

/* Scrollbars */
body.theme-dark::-webkit-scrollbar,
.theme-dark ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-dark::-webkit-scrollbar-track,
.theme-dark ::-webkit-scrollbar-track { background: transparent; }
body.theme-dark::-webkit-scrollbar-thumb,
.theme-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }
body.theme-dark::-webkit-scrollbar-thumb:hover,
.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* Glass surfaces */
.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.glass-strong {
    background: var(--glass-strong);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
}

/* Nav shell shared across pages */
.site-nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(10, 12, 24, 0.65);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    padding: 1rem 2rem;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-nav .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
}

.site-nav .brand svg { color: var(--accent); }

.site-nav .nav-links {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.site-nav a { text-decoration: none; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    letter-spacing: 0.01em;
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
    background: var(--grad-accent);
    color: #fff;
    box-shadow: 0 10px 26px rgba(109, 91, 245, 0.38);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(109, 91, 245, 0.5); }

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-1);
    border: 1px solid var(--glass-border-strong);
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Icon helper */
.icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: -3px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-1);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.icon-btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }

/* Text utilities */
.gradient-text {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}