/* ═══════════════════════════════════════════════════════════════
   THEME SYSTEM — Light / Dark Mode for econklar
   Light palette inspired by capa_light.png:
   soft blue-to-mint gradient, clean whites, dark navy text,
   teal/green accents from brand
   ═══════════════════════════════════════════════════════════════ */

/* ── Color scheme hint for browser chrome & scrollbars ── */
[data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ── Smooth transition during theme switch ── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
    transition-delay: 0s !important;
}


/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE — Pill switch with sun/moon icons
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    padding: 0;
    outline: none;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(34, 197, 94, 0.4);
}
.theme-toggle:active {
    transform: scale(0.93);
}
.theme-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
}

/* Thumb — the sliding green circle */
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22C55E;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.68, -0.1, 0.27, 1.1);
    box-shadow: 0 1px 6px rgba(34, 197, 94, 0.35);
}
.theme-toggle-thumb svg {
    width: 14px;
    height: 14px;
    position: absolute;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

/* Dark mode default — moon visible, thumb on left */
.theme-icon-sun {
    color: #0F172A;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.theme-icon-moon {
    color: #0F172A;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Light mode — sun visible, thumb slides right */
[data-theme="light"] .theme-toggle {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .theme-toggle:hover {
    background: rgba(15, 23, 42, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
}
[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(24px);
}
[data-theme="light"] .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="light"] .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Complete palette
   Inspired by capa_light.png: clean teal-mint gradient, premium
   whites, dark navy-teal text, WCAG-accessible green accents.
   All colors from a unified teal family — no blue-green clash.
   ═══════════════════════════════════════════════════════════════ */


/* ── Navigation ─────────────────────────────────────────────── */
/* Frosted-glass header — subtle shadow replaces the hard border */
[data-theme="light"] nav.fixed {
    border-bottom-color: transparent !important;
    box-shadow: 0 1px 3px rgba(15, 40, 55, 0.05),
                0 1px 2px rgba(15, 40, 55, 0.03);
}

/* ── Logo ───────────────────────────────────────────────────── */
/* Show dark-bg variant by default; swap to light-bg variant in light mode */
.logo-light-mode { display: none; }

[data-theme="light"] .logo-dark-mode { display: none; }
[data-theme="light"] .logo-light-mode { display: initial; }


/* ── Backgrounds ────────────────────────────────────────────── */

/* Body gradient: unified teal-to-mint family */
[data-theme="light"] body.bg-ecg-dark {
    background: linear-gradient(180deg, #F6FAFA 0%, #F0F7F4 100%) fixed !important;
}

[data-theme="light"] .bg-ecg-dark {
    background-color: #F7FAFA;
}
[data-theme="light"] .bg-ecg-dark-light {
    background-color: #FFFFFF;
}

/* Opacity variants */
[data-theme="light"] .bg-ecg-dark\/80 {
    background-color: rgba(255, 255, 255, 0.82);
}
[data-theme="light"] .bg-ecg-dark\/90 {
    background-color: rgba(255, 255, 255, 0.93);
}
[data-theme="light"] .bg-ecg-dark\/95 {
    background-color: rgba(255, 255, 255, 0.97);
}

/* Section alternation stripe — visible teal-tinted band */
[data-theme="light"] .bg-ecg-dark-light\/50 {
    background-color: #EDF4F2;
}
[data-theme="light"] .bg-ecg-dark-light\/95 {
    background-color: rgba(255, 255, 255, 0.97);
}

/* White-alpha overlays → dark-alpha on light bg */
[data-theme="light"] .bg-white\/5 {
    background-color: rgba(15, 40, 55, 0.03);
}
[data-theme="light"] .bg-white\/10 {
    background-color: rgba(15, 40, 55, 0.05);
}

/* Modal overlay */
[data-theme="light"] .bg-black\/85 {
    background-color: rgba(15, 40, 55, 0.45);
}


/* ── Text ───────────────────────────────────────────────────── */
/* Navy-teal hierarchy for excellent readability */
[data-theme="light"] .text-white {
    color: #0F2B3D;
}
[data-theme="light"] .text-gray-300 {
    color: #1E3D4A;
}
[data-theme="light"] .text-gray-400 {
    color: #3D5A65;
}
[data-theme="light"] .text-gray-500 {
    /* WCAG AA ≥ 4.5:1 on #fff (was #5C7D8A → 4.41:1, axe-core failure) */
    color: #536F7A;
}
[data-theme="light"] .text-gray-600 {
    /* WCAG AA ≥ 4.5:1 on #fff (was #7A9BA6 → 2.97:1) */
    color: #4D6B79;
}

/* Yellow for "fair" score — darker amber for WCAG on white */
[data-theme="light"] .text-yellow-400 {
    color: #92400E;
}

/* Green text — deeper emerald for 5:1+ contrast on light bg */
[data-theme="light"] .text-ecg-green {
    color: #047857;
}


/* ── Green buttons ──────────────────────────────────────────── */
/* Match the heading accent green (#047857) — white text for contrast */
[data-theme="light"] .bg-ecg-green {
    background-color: #047857;
    color: #FFFFFF;
}
[data-theme="light"] .bg-ecg-green .text-ecg-dark,
[data-theme="light"] .bg-ecg-green.text-ecg-dark {
    color: #FFFFFF;
}
[data-theme="light"] .hover\:bg-ecg-green-dark:hover {
    background-color: #065F46;
}
[data-theme="light"] .hover\:bg-ecg-green:hover {
    background-color: #047857;
    color: #FFFFFF;
}


/* ── Borders ────────────────────────────────────────────────── */
[data-theme="light"] .border-white\/5 {
    border-color: rgba(15, 40, 55, 0.07);
}
[data-theme="light"] .border-white\/10 {
    border-color: rgba(15, 40, 55, 0.12);
}
[data-theme="light"] .border-white\/20 {
    border-color: rgba(15, 40, 55, 0.18);
}
[data-theme="light"] .border-gray-600 {
    border-color: #B8CDD4;
}


/* ── Hover states ───────────────────────────────────────────── */
[data-theme="light"] .hover\:text-white:hover {
    color: #0F2B3D;
}
[data-theme="light"] .hover\:bg-white\/5:hover {
    background-color: rgba(15, 40, 55, 0.05);
}


/* ── Gradients ──────────────────────────────────────────────── */
[data-theme="light"] .from-ecg-dark {
    --tw-gradient-from: #F6FAFA;
}
[data-theme="light"] .to-ecg-dark {
    --tw-gradient-to: #F6FAFA;
}


/* ── Form elements ──────────────────────────────────────────── */
[data-theme="light"] .placeholder-gray-600::placeholder {
    color: #7A9BA6;
}
[data-theme="light"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    color: #0F2B3D;
}
[data-theme="light"] input::placeholder {
    color: #7A9BA6;
}
[data-theme="light"] option {
    background-color: #FFFFFF;
    color: #0F2B3D;
}


/* ── Shadows ────────────────────────────────────────────────── */
[data-theme="light"] .shadow-2xl {
    box-shadow: 0 8px 30px rgba(15, 40, 55, 0.08);
}
[data-theme="light"] .shadow-xl {
    box-shadow: 0 6px 20px rgba(15, 40, 55, 0.07);
}
[data-theme="light"] .shadow-lg {
    box-shadow: 0 4px 12px rgba(15, 40, 55, 0.06);
}

/* Ring offset (step indicators) */
[data-theme="light"] .ring-offset-ecg-dark {
    --tw-ring-offset-color: #F6FAFA;
}


/* ── Cards ──────────────────────────────────────────────────── */
/* Subtle resting shadow so cards lift off the background */
[data-theme="light"] .card-hover {
    box-shadow: 0 1px 4px rgba(15, 40, 55, 0.06),
                0 2px 8px rgba(15, 40, 55, 0.04);
}
[data-theme="light"] .card-hover:hover {
    box-shadow: 0 8px 30px rgba(4, 120, 87, 0.10),
                0 2px 8px rgba(15, 40, 55, 0.04);
}


/* ── Misc element overrides ─────────────────────────────────── */

/* Scroll indicator dot */
[data-theme="light"] .bg-gray-500 {
    background-color: #7A9BA6;
}

/* ECG glow effect — subtler on light bg */
[data-theme="light"] .ecg-glow {
    opacity: 0.10 !important;
}

/* ECG line stroke — deeper green for visibility */
[data-theme="light"] .ecg-line {
    stroke: #047857;
}

/* Yellow badge variants */
[data-theme="light"] .bg-yellow-500\/10 {
    background-color: rgba(234, 179, 8, 0.1);
}
[data-theme="light"] .bg-yellow-500\/20 {
    background-color: rgba(234, 179, 8, 0.15);
}

/* Spinner border */
[data-theme="light"] .border-t-ecg-green {
    border-top-color: #047857;
}

/* Score result border / outline buttons using border-ecg-green */
[data-theme="light"] .border-ecg-green {
    border-color: #047857;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Blog prose content
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .blog-prose p,
[data-theme="light"] .blog-prose ul,
[data-theme="light"] .blog-prose ol { color: #3D5A65; }
[data-theme="light"] .blog-prose li { color: #3D5A65; }
[data-theme="light"] .blog-prose strong,
[data-theme="light"] .blog-prose b { color: #0F2B3D; }
[data-theme="light"] .blog-prose em,
[data-theme="light"] .blog-prose i { color: #1E3D4A; }
[data-theme="light"] .blog-prose h3 { color: #0F2B3D; }
[data-theme="light"] .blog-prose h4 { color: #1E3D4A; }
[data-theme="light"] .blog-prose blockquote { color: #536F7A; }
[data-theme="light"] .blog-prose th {
    color: #0F2B3D;
    border-bottom-color: rgba(15, 40, 55, 0.10);
}
[data-theme="light"] .blog-prose td {
    color: #3D5A65;
    border-bottom-color: rgba(15, 40, 55, 0.06);
}
[data-theme="light"] .blog-prose code {
    background: rgba(15, 40, 55, 0.06);
    color: #0F2B3D;
}
[data-theme="light"] .blog-prose pre {
    background: rgba(15, 40, 55, 0.04);
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Legal content (privacy, terms)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .legal-content h1,
[data-theme="light"] .legal-content h2,
[data-theme="light"] .legal-content h3 { color: #0F2B3D; }
[data-theme="light"] .legal-content p,
[data-theme="light"] .legal-content ul,
[data-theme="light"] .legal-content ol,
[data-theme="light"] .legal-content li { color: #3D5A65; }
[data-theme="light"] .legal-content strong { color: #1E3D4A; }
[data-theme="light"] .legal-content code {
    background: rgba(15, 40, 55, 0.06);
}
[data-theme="light"] .legal-date { color: #536F7A !important; }