/* ===== Vars & smooth scroll ===== */
:root {
    /* Layout */
    --sticky-top: 0px;
    --sticky-offset: 0px;
    /* Brand: deepskyblue (kept) */
    --brand: #00bfff;
    --brand-600: #008cc0;
    --brand-50: #eaf8ff;
    --brand-100: #d4f1ff;
    --brand-ink: #0a4f75;
    --brand-border: rgba(0,191,255,.55);
    /* ✅ Added brand scale & text tokens (for new components) */
    --brand-200: #bfe9ff;
    --brand-300: #a6e1ff;
    --brand-700: #006b8f;
    --on-brand: #ffffff;
    --ink: #102a43;
    --muted-ink: #455a64;
    /* ✅ Surfaces & borders */
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: rgba(0,0,0,.08);
    /* ✅ Focus / states (theme-derived ring) */
    --focus-ring: color-mix(in srgb, var(--brand) 28%, transparent);
    --success: #1f8f5f;
    --warning: #b87900;
    --danger: #b00020;
    /* ✅ Cards / widgets */
    --card-bg: var(--brand-50);
    --card-gradient: linear-gradient(180deg, var(--brand-100), var(--brand-50));
    --shadow-color: color-mix(in srgb, var(--brand) 18%, transparent);
    --card-shadow: 0 6px 18px var(--shadow-color);
    /* ✅ Controls (buttons) */
    --btn-bg: var(--brand-600);
    --btn-text: var(--on-brand);
    --btn-border: var(--brand-600);
    /* ✅ Radius */
    --radius: 12px;
    /* WhatsApp button palette (kept) */
    --wa-bg: #22c55e;
    --wa-bg-hover: #16a34a;
    --wa-fg: #0a2e1c;
    --wa-ring: rgba(34,197,94,.35);
    --wa-border: #16a34a;
    --wa-shadow: 0 8px 18px rgba(22,163,74,.18);
}

/* Dark mode tuning (kept + expanded) */
@media (prefers-color-scheme: dark) {
    :root {
        /* WA shadow you had */
        --wa-shadow: 0 8px 18px rgba(0,0,0,.45);
        /* ✅ Better defaults on dark */
        --surface: #0f1115;
        --surface-2: #151925;
        --ink: #e6edf3;
        --muted-ink: #b6c2cf;
        /* Optional: gentle swap of light tints */
        --brand-50: #d4f1ff;
        --brand-100: #eaf8ff;
    }
}

/* Global behavior (kept) */
html {
    scroll-behavior: smooth;
}

* {
    touch-action: manipulation;
}