/* ═══════════════════════════════════════════════════════════════════
   WDP — Social Purpose Corrections  ·  Full Theme System
   Dark:  slate #0f172a  +  card #1e293b
   Light: parchment #f2f7f2  +  card #ffffff
   Brand: forest green #014325  ·  tan #ddb986
   Fonts: Asul (headings)  ·  Gudea (body)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Asul:wght@400;700&family=Gudea:ital,wght@0,400;0,700;1,400&display=swap');

/* ─── Design Token Variables ────────────────────────────────────── */
:root {
    /* SPC Brand (constant across themes) */
    --spc-green:       #014325;
    --spc-green-dark:  #001109;
    --spc-green-mid:   #02703d;
    --spc-tan:         #ddb986;
    --spc-tan-light:   #f0d4a8;
    --spc-tan-dark:    #c9a055;

    /* Dark theme defaults */
    --theme-bg:        #0f172a;
    --theme-card:      #1e293b;
    --theme-card-2:    rgba(31, 41, 55, 0.6);
    --theme-border:    rgba(75, 85, 99, 0.5);
    --theme-border-md: rgba(75, 85, 99, 0.3);
    --theme-input:     #111827;
    --theme-hover:     rgba(55, 65, 81, 0.5);
    --theme-text-1:    #ffffff;
    --theme-text-2:    #d1d5db;
    --theme-text-3:    #9ca3af;
    --theme-text-4:    #6b7280;
    --theme-shadow:    none;
    --theme-chart-grid: rgba(255,255,255,0.05);
    --theme-chart-text: #9ca3af;
    --theme-chart-tooltip-bg: #1e293b;
}

/* ─── Light Theme Tokens ────────────────────────────────────────── */
html:not(.dark) {
    color-scheme: light;
    --theme-bg:        #f2f7f2;
    --theme-card:      #ffffff;
    --theme-card-2:    rgba(255,255,255,0.9);
    --theme-border:    rgba(178,211,189,0.8);
    --theme-border-md: rgba(178,211,189,0.5);
    --theme-input:     #f9fafb;
    --theme-hover:     rgba(1,67,37,0.05);
    --theme-text-1:    #1a2e1f;
    --theme-text-2:    #374151;
    --theme-text-3:    #6b7280;
    --theme-text-4:    #9ca3af;
    --theme-shadow:    0 1px 4px rgba(1,67,37,0.08), 0 0 0 1px rgba(178,211,189,0.4);
    --theme-chart-grid: rgba(0,0,0,0.06);
    --theme-chart-text: #6b7280;
    --theme-chart-tooltip-bg: #ffffff;
}

/* ─── Global Typography ─────────────────────────────────────────── */
body {
    font-family: 'Gudea', system-ui, -apple-system, sans-serif;
    background-color: var(--theme-bg);
    color: var(--theme-text-1);
    transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Asul', Georgia, serif;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   All dark-slate Tailwind classes rewritten for the parchment palette
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page & structural backgrounds ─────────────────────────────── */
html:not(.dark) .bg-wdp-dark     { background-color: var(--theme-bg) !important; }
html:not(.dark) .bg-wdp-card     { background-color: var(--theme-card) !important;
                                    box-shadow: var(--theme-shadow); }
html:not(.dark) .bg-gray-900     { background-color: #f9fafb !important; }
html:not(.dark) .bg-gray-800     { background-color: #eef4ef !important; }
html:not(.dark) .bg-gray-700     { background-color: #e0ebe3 !important; }
html:not(.dark) .bg-gray-600     { background-color: #c9d9cc !important; }
html:not(.dark) .bg-gray-500     { background-color: #a8bfac !important; }
html:not(.dark) .bg-gray-400     { background-color: #8aaa90 !important; }
html:not(.dark) .bg-gray-300     { background-color: #d0ddd3 !important; }

/* ── Opacity-modified backgrounds (Tailwind slash syntax) ───────── */
html:not(.dark) .bg-gray-800\/80 { background-color: rgba(255,255,255,0.96) !important; }
html:not(.dark) .bg-gray-800\/60 { background-color: rgba(255,255,255,0.9) !important;
                                    box-shadow: var(--theme-shadow); }
html:not(.dark) .bg-gray-800\/50 { background-color: rgba(249,251,249,0.8) !important; }
html:not(.dark) .bg-gray-800\/40 { background-color: rgba(240,247,240,0.9) !important; }
html:not(.dark) .bg-gray-800\/30 { background-color: rgba(240,247,240,0.6) !important; }
html:not(.dark) .bg-gray-700\/70 { background-color: rgba(224,235,227,0.7) !important; }
html:not(.dark) .bg-gray-700\/60 { background-color: rgba(224,235,227,0.6) !important; }
html:not(.dark) .bg-gray-700\/40 { background-color: rgba(224,235,227,0.4) !important; }
html:not(.dark) .bg-gray-700\/30 { background-color: rgba(1,67,37,0.04) !important; }
html:not(.dark) .bg-gray-700\/20 { background-color: rgba(1,67,37,0.03) !important; }
html:not(.dark) .bg-gray-900\/60 { background-color: rgba(249,251,249,0.9) !important; }
html:not(.dark) .bg-gray-900\/50 { background-color: rgba(249,251,249,0.8) !important; }
html:not(.dark) .bg-gray-900\/40 { background-color: rgba(249,251,249,0.6) !important; }
html:not(.dark) .bg-gray-900\/30 { background-color: rgba(249,251,249,0.5) !important; }
html:not(.dark) .bg-gray-500\/20 { background-color: rgba(1,67,37,0.06) !important; }

/* ── Text colors ────────────────────────────────────────────────── */
html:not(.dark) .text-white   { color: var(--theme-text-1) !important; }
html:not(.dark) .text-gray-200 { color: #2d3748 !important; }
html:not(.dark) .text-gray-300 { color: var(--theme-text-2) !important; }
html:not(.dark) .text-gray-400 { color: var(--theme-text-3) !important; }
html:not(.dark) .text-gray-500 { color: var(--theme-text-4) !important; }
html:not(.dark) .text-gray-600 { color: #9ca3af !important; }
html:not(.dark) .text-gray-700 { color: #6b7280 !important; }

/* Keep white text on intentionally colored/dark backgrounds */
html:not(.dark) .bg-spc-green,
html:not(.dark) .bg-spc-green * { color: #ffffff !important; }
html:not(.dark) .spc-footer,
html:not(.dark) .spc-footer * { color: #ffffff !important; }

/* ── Borders ────────────────────────────────────────────────────── */
html:not(.dark) .border-gray-700  { border-color: #cfdfd4 !important; }
html:not(.dark) .border-gray-600  { border-color: #bdd0c2 !important; }
html:not(.dark) .border-gray-500  { border-color: #a8bfac !important; }
html:not(.dark) .border-gray-300  { border-color: #d5e3d8 !important; }
html:not(.dark) .border-gray-700\/50 { border-color: rgba(207,223,212,0.9) !important; }
html:not(.dark) .border-gray-700\/30 { border-color: rgba(207,223,212,0.7) !important; }
html:not(.dark) .border-gray-700\/20 { border-color: rgba(207,223,212,0.5) !important; }

/* ── Divide lines ───────────────────────────────────────────────── */
html:not(.dark) .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(207,223,212,0.7);
}
html:not(.dark) .divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(207,223,212,0.8) !important;
}

/* ── Interactive states ─────────────────────────────────────────── */
html:not(.dark) .hover\:bg-gray-700:hover     { background-color: #eef4ef !important; }
html:not(.dark) .hover\:bg-gray-600:hover     { background-color: #e0ebe3 !important; }
html:not(.dark) .hover\:bg-gray-700\/20:hover { background-color: rgba(1,67,37,0.05) !important; }
html:not(.dark) .hover\:bg-gray-700\/30:hover { background-color: rgba(1,67,37,0.07) !important; }
html:not(.dark) .hover\:bg-gray-700\/50:hover { background-color: rgba(1,67,37,0.09) !important; }
html:not(.dark) .hover\:text-white:hover      { color: var(--theme-text-1) !important; }

/* ── Form inputs ────────────────────────────────────────────────── */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    color: #1a2e1f !important;
    border-color: #cfdfd4 !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder { color: #9ca3af !important; }

/* ── Header / nav ───────────────────────────────────────────────── */
html:not(.dark) header { background-color: #ffffff !important; }
html:not(.dark) nav.fixed.bottom-0 { background-color: #ffffff !important; }

/* ── Table rows ─────────────────────────────────────────────────── */
html:not(.dark) .bg-gray-800\/40 { background-color: #eef4ef !important; } /* thead */
html:not(.dark) tr:hover td { background-color: rgba(1,67,37,0.03); }

/* ── Progress track ─────────────────────────────────────────────── */
html:not(.dark) .bg-gray-700.rounded-full,
html:not(.dark) .bg-gray-700.h-3,
html:not(.dark) .bg-gray-700.h-2,
html:not(.dark) .bg-gray-700.h-1\.5 { background-color: #dae8dd !important; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(1,67,37,0.18); }
html:not(.dark) * { scrollbar-color: rgba(1,67,37,0.18) transparent; }

/* ── Focus ring ─────────────────────────────────────────────────── */
html:not(.dark) :focus-visible { outline-color: var(--spc-green); }

/* ── Smooth theme transition ────────────────────────────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}
/* Don't animate things that shouldn't (animations, transforms) */
.animate-spin, .animate-ping, .animate-record-pulse,
.typing-dot, .progress-bar-fill, .fade-in,
[x-transition], [x-cloak] {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 9999px;
    border: 1.5px solid var(--spc-tan);
    background: var(--spc-green);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}
html:not(.dark) .theme-toggle {
    background: #e8f4ea;
    border-color: var(--spc-green);
}
.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--spc-tan);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}
html:not(.dark) .theme-toggle-knob {
    background: var(--spc-green);
    transform: translateX(24px);
}
.theme-toggle-icon { width: 10px; height: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS & INTERACTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* HTMX transitions */
.htmx-settling { opacity: 0; }
.htmx-swapping { opacity: 0; transition: opacity 0.15s ease-out; }
.htmx-added    { opacity: 0; }
.htmx-added    { opacity: 1; transition: opacity 0.3s ease-in; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1; }
}
.typing-dot { animation: typingBounce 1.2s ease-in-out infinite; }

@keyframes progressFill { from { width: 0; } }
.progress-bar-fill { animation: progressFill 0.8s ease-out; }

.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1, 67, 37, 0.2);
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes recordPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.animate-record-pulse { animation: recordPulse 1.5s ease-in-out infinite; }

@keyframes notifPop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.notif-badge-animate { animation: notifPop 0.3s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

/* ── Scrollbar (dark default) ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(221,185,134,0.2);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(221,185,134,0.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(221,185,134,0.2) transparent; }

/* ── Chat ──────────────────────────────────────────────────────── */
#chat-messages { scroll-behavior: smooth; }
textarea { transition: height 0.1s ease; }

/* ── SPC Footer ────────────────────────────────────────────────── */
.spc-footer {
    background: var(--spc-green);
    color: #fff;
    font-family: 'Gudea', sans-serif;
    font-size: 0.75rem;
}

/* ── Bottom nav iOS ────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    nav.fixed.bottom-0 { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
    main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ── No horizontal overflow ────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Focus ring ────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--spc-tan); outline-offset: 2px; }

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
    header, nav, footer, .fixed, button, form, [x-data] button { display: none !important; }
    body { background: white !important; color: black !important; }
    main { padding: 0 !important; }
    .bg-gray-800\/60, .bg-wdp-card { background: white !important; border-color: #ccc !important; }
    .text-white, .text-gray-300, .text-gray-200 { color: black !important; }
    .text-gray-400, .text-gray-500 { color: #666 !important; }
}

/* ── Mobile touch-friendly inputs ─────────────────────────────── */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
    button, a[role="button"], [role="button"] { min-height: 44px; }
}