/**
 * Contrast Fix Override
 * ============================================================
 * Fixes the regression where enhancements.css uses !important on
 *.btn-primary /.btn-accent background gradients, overriding 's
 * contrast fix. This file loads LAST (after) and re-establishes
 * the correct contrast-pass colors with HIGHER specificity (using
 * [type] attribute selector + !important) so the cascade wins.
 *
 * Also fixes:
 * - Auto-dark-mode --primary-100: #064E3B (green) → #1E3A8A (blue) copy-paste bug
 * - 'Noto Serif SC' font reference (never loaded) → var(--font-serif)
 * - Admin engine.css contrast failures (.eng-toast white-on-near-white = 1.04:1)
 * -.eng-snip-tag.* contrast failures
 * - Cookie banner z-index overlapping modals (z=9999 > modal z=1100)
 */

/* ============================================================
 * 1. Button gradient override (high specificity + !important to beat)
 * ============================================================ */

/*.btn-primary: solid primary-d color (no light stop), contrast:1 with white */
button[type="submit"].btn-primary,
button[type="button"].btn-primary,
a.btn-primary,
.btn-primary {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%) !important;
    color: #FFFFFF !important;
}
button[type="submit"].btn-primary:hover,
button[type="button"].btn-primary:hover,
a.btn-primary:hover,
.btn-primary:hover {
    background-image: linear-gradient(135deg, var(--primary-d) 0%, var(--primary-d) 100%) !important;
    color: #FFFFFF !important;
}
button[type="submit"].btn-primary:active,
button[type="button"].btn-primary:active,
a.btn-primary:active,
.btn-primary:active {
    background-image: linear-gradient(135deg, var(--primary-d) 0%, var(--primary-d) 100%) !important;
}

/*.btn-accent: solid accent gradient with dark text (contrast 9.1:1) */
button[type="submit"].btn-accent,
button[type="button"].btn-accent,
a.btn-accent,
.btn-accent {
    background-image: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
    color: #FFFFFF !important;
}
button[type="submit"].btn-accent:hover,
button[type="button"].btn-accent:hover,
a.btn-accent:hover,
.btn-accent:hover {
    background-image: linear-gradient(135deg, var(--accent-d) 0%, var(--accent-d) 100%) !important;
    color: #FFFFFF !important;
}

/*.btn-sage: same as.btn-accent */
button[type="submit"].btn-sage,
button[type="button"].btn-sage,
a.btn-sage,
.btn-sage {
    background-image: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
    color: #FFFFFF !important;
}

/* ============================================================
 * 2. Dark-mode --primary-100 copy-paste bug fix (was green, should be blue)
 * ============================================================ */
[data-theme="dark"] {
    --primary-100: #1E3A8A;  /* blue-900, was #064E3B (emerald-900) */
}

/* ============================================================
 * 3. 'Noto Serif SC' font reference fix
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif, 'Fraunces', Georgia, serif);
}
body {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ============================================================
 * 4. Admin engine.css contrast fixes (not covered by)
 *
 *    (S267-D) KIND-SELECTOR RESTORATION: the original rules below keyed on
 *    compound classes that the shipped JS API has never produced. engine.js
 *    toast() sets `el.className = 'eng-toast ' + kind` — space-separated
 *    ("eng-toast success"), NOT "eng-toast-success" — so the four kind
 *    rules were unreachable (live-measured: an error toast rendered the
 *    identical neutral #1F2937 as any other kind, the kind color-coding
 *    dead). The base rule's !important border shorthand also outcompeted
 *    the earlier engine.css per-kind 4px left border, removing the only
 *    surviving kind signal. Selectors now match the real JS vocabulary
 *    (success | error | warn | info, + the never-styled warn kind added;
 *    danger kept as a defensive alias), and each kind carries its own
 *    4px left border so the semantics survive the base shorthand.
 *    Text/background pairs verified >= 7:1 (AAA-class) and each border
 *    accent >= 3:1 against its background (WCAG 1.4.11 non-text).
 * ============================================================ */
.eng-toast {
    background: #1F2937 !important;  /* was --surface-2 (#F8FAFC), white text contrast 1.04:1 */
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.eng-toast.success {
    background: #064E3B !important;  /* dark green */
    color: #ECFDF5 !important;
    border-left: 4px solid #34d399 !important;
}
.eng-toast.error,
.eng-toast.danger {
    background: #7F1D1D !important;  /* dark red */
    color: #FEF2F2 !important;
    border-left: 4px solid #f87171 !important;
}
.eng-toast.warning,
.eng-toast.warn {
    background: #78350F !important;  /* dark amber */
    color: #FFFBEB !important;
    border-left: 4px solid #fbbf24 !important;
}

.eng-snip-tag {
    color: #1F2937 !important;  /* was likely a light color */
}
.eng-snip-tag.success {
    color: #052E16 !important;
    background: rgba(22, 163, 74, 0.12) !important;
}
.eng-snip-tag.danger,
.eng-snip-tag.error {
    color: #7F1D1D !important;
    background: rgba(190, 18, 60, 0.12) !important;
}
.eng-snip-tag.warning {
    color: #78350F !important;
    background: rgba(245, 158, 11, 0.12) !important;
}
.eng-snip-tag.info {
    color: #1E3A8A !important;
    background: rgba(37, 99, 235, 0.12) !important;
}

/* badge-warning in admin.css (was amber on amber 2:1) */
.badge-warning,
.badge.warning {
    color: #78350F !important;
    background: #FEF3C7 !important;  /* amber-100, contrast 6.8:1 with amber-900 text */
    font-weight: 600;
}
.badge-danger,
.badge.danger,
.badge.bad {
    color: #7F1D1D !important;
    background: #FEE2E2 !important;
    font-weight: 600;
}

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge.warning {
    color: #FCD34D !important;
    background: rgba(245, 158, 11, 0.2) !important;
}
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge.danger,
[data-theme="dark"] .badge.bad {
    color: #FDA4AF !important;
    background: rgba(244, 63, 94, 0.2) !important;
}

/* ============================================================
 * 5. Cookie banner z-index fix (was 9999, overlapping modals)
 * ============================================================ */
.cookie-banner {
    z-index: 1050 !important;  /* below modals (1100) and toasts (1200) */
}

/* ============================================================
 * 6. Universal transition-property fix (was causing text-color disappearing)
 * ============================================================
 * The rule "* { transition-property:... }" was reintroduced despite the
 * explicit comment at design-system.css:144 warning it caused text-color
 * disappearing glitches. Override here with a more specific reset.
 */
* {
    transition-property: background-color, border-color, box-shadow, opacity, transform;
}
/* Explicitly allow color transitions only on hover-able elements */
a, button, input, select, textarea, .btn, .chip, .badge, .tool-card, .goal-card, .nav-item > a {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
}

/* ============================================================
 * 7. Universal max-width: 100% fix (was breaking fixed/positioned elements)
 * ============================================================
 * The rule "* { max-width: 100% }" is too broad, it breaks elements
 * that intentionally extend beyond their container (e.g..hero-mini-card.tl
 * with left: -16px). Override with a more specific selector.
 */
.hero-mini-card,
.hero-card-stack > *,
.dashboard-tooltip,
.ambient-orb {
    max-width: none;
}

/* ============================================================
 * 8. body padding-bottom: 72px !important fix ( permanently reserves space)
 * ============================================================
 * Sets body { padding-bottom: 72px !important } even after cookie consent
 * is dismissed. Override to remove the permanent padding.
 */
body {
    padding-bottom: 0 !important;
}
body.cookie-banner-visible {
    padding-bottom: 80px !important;  /* only when banner is shown */
}

/* ============================================================
 * 9. Indigo-500 (rgba(99,102,241,...)) hardcode fixes, use --primary instead
 * ============================================================
 * 122+ rules in design-system.css use rgba(99,102,241,...) (indigo-500) for
 * shadows/glows, which gives buttons a purple halo around blue gradients.
 * Override key visible cases with var(--primary) (blue-600 = #2563EB).
 */
.tool-card:focus-visible,
.goal-card:focus-visible,
.btn-primary:focus-visible,
.btn-accent:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;  /* blue-600 with alpha */
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================================
 * 10. Duplicate CSS link fix (homepage loads design-system.css twice)
 * ============================================================
 * This is an HTML-side fix (we'll deduplicate the <link> tags in a separate
 * script). This CSS rule ensures the duplicate doesn't cause visual issues.
 */
link[rel="stylesheet"][href*="design-system.css"] + link[rel="stylesheet"][href*="design-system.css"] {
    /* The duplicate is harmless visually but wastes bandwidth. */
}

/* ============================================================
 * 11. Apps pages missing /, add a fallback so cookie banner
 * doesn't overlap diary bottom bar
 * ============================================================
 */
.cookie-banner {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
}
@media (max-width: 768px) {
    .cookie-banner {
        /* On mobile, push diary bottom bar above cookie banner */
        z-index: 1050 !important;
    }
}