/**
 * Fractan v3 — Site-wide overrides
 * =================================
 * Loaded AFTER variables.css and base.css from every page that extends
 * base.html. Job: restyle the elements whose MARKUP changed in v3
 * (the logo) and refine a few primitives where the variable-swap alone
 * doesn't quite land (sticky blurred header, pill buttons, light
 * cookie banner, etc.).
 *
 * Everything page-specific (auth.css, dashboard.css, admin.css, …)
 * keeps working unchanged because it references the same variable
 * names (--gold, --bg-primary, etc.), which now hold light + teal
 * values.
 */

/* ============================================================
   Header — sticky cream with subtle blur, taller, light theme
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: 18px 0;
    background: rgba(250, 250, 247, 0.82);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(10, 10, 15, 0.06);
}

/* ============================================================
   Logo — new markup: three-curve SVG + uppercase wordmark
   ============================================================ */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 38px;
    color: var(--text-primary);
    flex: 0 0 auto;
    transition: color var(--transition-base);
    /* Override flex-column from legacy base.css */
    flex-direction: row;
    gap: 0;
}

.logo-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;        /* 28px */
    font-weight: 700;
    letter-spacing: 0.025em;
    color: var(--text-primary);
    transition: color var(--transition-base);
    text-transform: none;       /* the text is already uppercase */
}

/* legacy children kept for backward compatibility */
.logo-tan { color: inherit; }
.logo-accent { display: none !important; }
.logo-sub { display: none !important; }

.logo:hover .logo-text,
.logo:hover .logo-mark,
.logo:focus-visible .logo-text,
.logo:focus-visible .logo-mark {
    color: var(--teal-dark);
}

/* ============================================================
   Nav links
   ============================================================ */
.nav-links {
    gap: 6px;
}
.nav-links > a {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 15px;
    transition: color var(--transition-base), background-color var(--transition-base);
}
.nav-links > a:hover,
.nav-links > a:focus-visible {
    color: var(--text-primary);
    background: rgba(10, 10, 15, 0.04);
}

/* ============================================================
   Buttons — pill primary, ink-on-cream
   ============================================================ */
.btn {
    border-radius: var(--btn-radius);
    font-weight: 500;
    font-size: 15px;
    transition: background-color var(--transition-base), color var(--transition-base),
                transform var(--transition-base), box-shadow var(--transition-base);
}
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 12px -4px rgba(10, 10, 15, 0.15);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(13, 148, 136, 0.35);
}

/* ============================================================
   Profile button (initials avatar) — circle on cream
   ============================================================ */
.profile-btn {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid rgba(13, 148, 136, 0.18);
}
.profile-btn:hover,
.profile-btn:focus-visible {
    background: var(--teal-subtle);
    color: var(--teal-dark);
    box-shadow: 0 4px 14px -6px rgba(13, 148, 136, 0.40);
}

/* ============================================================
   Body / page background
   ============================================================ */
html, body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ============================================================
   Cookie banner — light surface
   ============================================================ */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    color: var(--text-secondary);
    border-top: 1px solid var(--card-border);
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    z-index: 9999; font-size: 13px;
    box-shadow: 0 -10px 30px -18px rgba(10, 10, 15, 0.18);
}
.cookie-banner a {
    color: var(--teal-dark);
    text-decoration: underline;
}
.cookie-accept {
    padding: 7px 18px;
    background: var(--dark);
    color: #fff;
    border: 0;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-base);
}
.cookie-accept:hover { background: var(--teal-dark); }

/* ============================================================
   Footer — light, low-key
   ============================================================ */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--card-border);
    color: var(--text-muted);
}
.footer a { color: var(--text-muted); transition: color var(--transition-base); }
.footer a:hover { color: var(--text-primary); }

/* ============================================================
   Cards — light surfaces with the new shadow scale
   ============================================================ */
.card,
.dashboard-card,
.profile-card,
.admin-card,
.auth-card,
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   Form inputs — light fields with teal focus ring
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--shadow-focus);
}
::placeholder { color: var(--text-muted); opacity: 1; }

/* ============================================================
   Flash messages — softer, light surfaces
   ============================================================ */
.flash {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}
.flash-success { border-left: 3px solid var(--success); }
.flash-info    { border-left: 3px solid var(--info); }
.flash-warning { border-left: 3px solid var(--warning); }
.flash-error   { border-left: 3px solid var(--error); }

/* ============================================================
   Skip-link — accessible focus state on cream bg
   ============================================================ */
.skip-link:focus {
    background: var(--dark);
    color: #fff;
}

/* ============================================================
   Mobile-menu / hamburger lines: dark on light
   ============================================================ */
.mobile-menu-toggle .hamburger-line {
    background: var(--text-primary);
}

/* ============================================================
   Auth pages (login / register / verify) — light-theme polish
   ============================================================
   base.css still bakes in a heavy dark drop-shadow on .auth-card
   and tints the ambient glow with the old colour. The .card group
   above already lifts the surface; we tweak the rest here. */
.auth-card {
    box-shadow: var(--shadow-lg);
}

.auth-container::before {
    background: radial-gradient(circle, rgba(13, 148, 136, 0.06) 0%, transparent 70%);
}

/* Submit button on auth forms — inherit the v3 pill primary */
.auth-card .btn-primary,
.btn-submit {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 12px -4px rgba(10, 10, 15, 0.15);
}
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus-visible,
.btn-submit:hover,
.btn-submit:focus-visible {
    background: var(--btn-primary-hover);
    box-shadow: 0 8px 18px -6px rgba(13, 148, 136, 0.35);
}

/* "Continue without an account" link — quiet on cream */
.auth-skip {
    border-top-color: var(--card-border);
}
.auth-skip-link {
    color: var(--teal-dark);
    border-color: var(--card-border);
}
.auth-skip-link:hover,
.auth-skip-link:focus-visible {
    color: #fff;
    background: var(--teal-dark);
    border-color: var(--teal-dark);
}

/* Password requirements list — softer text on cream */
.password-requirements {
    color: var(--text-muted);
}

/* ============================================================
   Suites dashboard — drop the dark shadows + glow scheme
   ============================================================ */
.dashboard,
.dashboard-skeleton {
    background: var(--bg-primary);
}

/* Atmospheric blobs already use teal/indigo at low opacity — keep */

.suite-card {
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}
.suite-card:hover,
.suite-card:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: rgba(13, 148, 136, 0.28);
}

.suite-card:has(.card-header.teal):hover {
    border-color: rgba(13, 148, 136, 0.32);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(13, 148, 136, 0.10);
}
.suite-card:has(.card-header.indigo):hover {
    border-color: rgba(99, 102, 241, 0.30);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(99, 102, 241, 0.10);
}

/* Card headers: lift slightly above body, lose the dark feel */
.card-header.teal,
.card-header.indigo {
    background: var(--bg-elevated);
}
.card-body {
    background: var(--bg-card);
}

/* Tool list rows: soft cream surface */
.tool-item {
    background: var(--bg-elevated);
    border-color: var(--card-border);
}

/* Launch buttons — kill the dark glow on hover */
.suite-card:has(.card-header.teal) .launch-btn.available {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(13, 148, 136, 0.35);
}
.suite-card:has(.card-header.teal) .launch-btn.available:hover,
.suite-card:has(.card-header.teal) .launch-btn.available:focus-visible {
    background: var(--teal-dark);
    box-shadow: 0 10px 24px -8px rgba(13, 148, 136, 0.45);
}
.suite-card:has(.card-header.indigo) .launch-btn.available {
    background: var(--indigo);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.35);
}
.suite-card:has(.card-header.indigo) .launch-btn.available:hover,
.suite-card:has(.card-header.indigo) .launch-btn.available:focus-visible {
    background: var(--indigo-dark);
    box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.45);
}

/* Coming-soon launch button (if used) */
.launch-btn.coming-soon {
    background: var(--bg-elevated);
    border-color: var(--card-border);
    color: var(--text-muted);
}

/* Admin button — light surface */
.admin-btn {
    background: var(--bg-card);
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.admin-btn:hover,
.admin-btn:focus-visible {
    background: var(--teal-subtle);
    border-color: var(--teal);
    color: var(--teal-dark);
}

/* Skeleton shimmer — was hardcoded to old gold hex */
.skeleton-bone {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 0%,
        rgba(13, 148, 136, 0.07) 40%,
        var(--bg-elevated) 80%
    );
}
.skeleton-card {
    background: var(--bg-card);
    border-color: var(--card-border);
}
.skeleton-card-header {
    background: var(--bg-elevated);
}
.skeleton-tool-item {
    border-color: var(--card-border);
}

/* ============================================================
   Honour reduced-motion preference globally
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}