/* ═══════════════════════════════════════════════════
   FormPeak — Global Utility Classes
   Tailwind handles base colors via config.
   This file provides reusable component classes
   to avoid repeating Tailwind class strings.
   ═══════════════════════════════════════════════════ */

/* ─── CSS Custom Properties (legacy support for index.html) ─── */
:root {
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --surface-2: #F3F4F6;
    --text: #0F172A;
    --text-2: #334155;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    --text-1: #0F172A;
    --border: #000000;
    --border-2: #E2E8F0;
    --accent: #BEF264;
    --accent-hover: #A3E635;
    --radius: 0px;
    --blue: #2563EB;
    --blue-hover: #1D4ED8;
    --blue-tint: rgba(59,130,246,0.1);
    --blue-border: rgba(59,130,246,0.2);
    --green: #16A34A;
    --green-tint: rgba(34,197,94,0.1);
    --green-border: rgba(34,197,94,0.2);
    --red: #DC2626;
    --red-tint: rgba(239,68,68,0.08);
    --red-border: rgba(239,68,68,0.2);
    --amber: #D97706;
    --amber-tint: rgba(245,158,11,0.1);
    --amber-border: rgba(245,158,11,0.2);
    --strava: #FC4C02;
    --polar: #D1032E;
}
.dark {
    --bg: #0F172A;
    --surface: #1E293B;
    --surface-2: #162038;
    --text: #F8FAFC;
    --text-2: #CBD5E1;
    --text-muted: #94A3B8;
    --text-light: #64748B;
    --text-1: #F8FAFC;
    --border: #BEF264;
    --border-2: #334155;
    --accent: #BEF264;
    --accent-hover: #A3E635;
    --blue-tint: rgba(59,130,246,0.15);
    --blue-border: rgba(59,130,246,0.3);
    --green-tint: rgba(34,197,94,0.15);
    --green-border: rgba(34,197,94,0.3);
    --red-tint: rgba(239,68,68,0.15);
    --red-border: rgba(239,68,68,0.3);
    --amber-tint: rgba(245,158,11,0.15);
    --amber-border: rgba(245,158,11,0.3);
}

/* ─── Brutal effects ─── */
.brutal-shadow { box-shadow: 4px 4px 0px 0px rgba(0,0,0,1); }
.dark .brutal-shadow { box-shadow: 4px 4px 0px 0px #BEF264; }

.brutal-border { border: 3px solid #000; }
.dark .brutal-border { border: 3px solid #BEF264; }

.brutal-card-hover { transition: all 0.15s; }
.brutal-card-hover:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
}
.dark .brutal-card-hover:hover {
    box-shadow: 8px 8px 0px 0px #BEF264;
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 3px solid #000;
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none;
    white-space: nowrap;
}
.dark .btn { border-color: #BEF264; }

.btn-primary {
    background: #BEF264;
    color: #000;
}
.btn-primary:hover {
    box-shadow: 4px 4px 0px #000;
    transform: translate(-1px, -1px);
}
.dark .btn-primary:hover {
    box-shadow: 4px 4px 0px #BEF264;
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background: #FFFFFF;
    color: #0F172A;
}
.dark .btn-secondary {
    background: #1E293B;
    color: #F8FAFC;
}
.btn-secondary:hover {
    box-shadow: 4px 4px 0px #000;
    transform: translate(-1px, -1px);
}
.dark .btn-secondary:hover {
    box-shadow: 4px 4px 0px #BEF264;
}

.btn-danger {
    background: transparent;
    color: #DC2626;
    border-color: #DC2626;
}
.btn-danger:hover {
    background: #FEF2F2;
}
.dark .btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-blue {
    background: #2563EB;
    color: #FFF;
    border-color: #2563EB;
}
.btn-blue:hover {
    background: #1D4ED8;
    box-shadow: 4px 4px 0px #2563EB;
    transform: translate(-1px, -1px);
}

/* ─── Cards ─── */
.card {
    background: #FFFFFF;
    border: 3px solid #000;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.12s;
}
.dark .card {
    background: #1E293B;
    border-color: #BEF264;
}
.card:hover {
    border-color: #BEF264;
}
.dark .card:hover {
    border-color: #A3E635;
}
.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 1rem;
}

/* ─── Form labels ─── */
.form-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
}

/* ─── Status / alert messages ─── */
.msg {
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
    border: 2px solid;
}
.msg-error   { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }
.msg-info    { background: #EFF6FF; border-color: #BFDBFE; color: #2563EB; }
.msg-success { background: #F0FDF4; border-color: #BBF7D0; color: #16A34A; }
.msg-warning { background: #FFFBEB; border-color: #FDE68A; color: #D97706; }
.dark .msg-error   { background: rgba(239,68,68,0.15);  border-color: rgba(239,68,68,0.3); }
.dark .msg-info    { background: rgba(59,130,246,0.15);  border-color: rgba(59,130,246,0.3); }
.dark .msg-success { background: rgba(34,197,94,0.15);   border-color: rgba(34,197,94,0.3); }
.dark .msg-warning { background: rgba(245,158,11,0.15);  border-color: rgba(245,158,11,0.3); }

/* ─── Modal ─── */
.modal-ov {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-ov.open { display: flex; }
.modal-box {
    background: #FFFFFF;
    border: 3px solid #000;
    padding: 1.75rem;
    width: 100%;
    max-width: 380px;
    position: relative;
    box-shadow: 6px 6px 0px #000;
}
.dark .modal-box {
    background: #1E293B;
    border-color: #BEF264;
    box-shadow: 6px 6px 0px #BEF264;
}

/* ─── Spinner ─── */
.spinner {
    display: none;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
.dark .spinner {
    border-color: rgba(255,255,255,0.2);
    border-top-color: #FFF;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Theme toggle ─── */
.theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    background: none;
    cursor: pointer;
    transition: all 0.12s;
}
.dark .theme-toggle {
    border-color: #BEF264;
    color: #BEF264;
}
.theme-toggle:hover {
    background: #F3F4F6;
}
.dark .theme-toggle:hover {
    background: #1E293B;
}

/* ─── Auth pages ─── */
.auth-wrap {
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.auth-brand {
    margin-bottom: 1.5rem;
}
.auth-brand p {
    font-size: 0.875rem;
    color: #64748B;
    margin-top: 0.5rem;
}
.dark .auth-brand p {
    color: #94A3B8;
}
.auth-footer {
    text-align: center;
    font-size: 0.82rem;
    color: #64748B;
    margin-top: 1rem;
}
.dark .auth-footer {
    color: #94A3B8;
}
.auth-footer a {
    color: #0F172A;
    font-weight: 600;
    border-bottom: 2px solid #E2E8F0;
    text-decoration: none;
}
.dark .auth-footer a {
    color: #F8FAFC;
    border-bottom-color: #334155;
}
.auth-footer a:hover {
    border-bottom-color: #BEF264;
}

/* ─── Form inputs (auth/general) ─── */
.input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    border: 2px solid #D1D5DB;
    background: #FFFFFF;
    color: #0F172A;
    transition: border-color 0.12s;
}
.dark .input {
    border-color: #475569;
    background: #0F172A;
    color: #F8FAFC;
}
.input:focus {
    outline: none;
    border-color: #BEF264;
}
.input::placeholder {
    color: #9CA3AF;
}
.dark .input::placeholder {
    color: #64748B;
}

/* ─── Scroll animation (marquee) ─── */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}