/* ═══════════════════════════════════════════════════
   Design tokens — dark theme (default)
   Served from the shared assets server.
   Import via: <link> or @import from SHARED_URL/css/tokens.css
   ═══════════════════════════════════════════════════ */

:root {
    /* ─── Accent colors ─── */
    --blue: #5B9FFF;
    --blue-light: #1a2744;
    --green: #34D399;
    --green-light: #0d2818;
    --orange: #FB923C;
    --orange-light: #2a1f0a;
    --red: #FF8585;
    --red-light: #2a0f0e;
    --purple: #A78BFA;
    --purple-light: #1a1333;

    /* ─── Surface scale (lower number = darker in dark mode) ─── */
    --slate-50: #0c1220;
    --slate-100: #111827;
    --slate-200: #1e293b;
    --slate-300: #334155;
    --slate-400: #64748b;
    --slate-500: #94a3b8;
    --slate-600: #cbd5e1;
    --slate-800: #e2e8f0;
    --slate-900: #f1f5f9;

    /* ─── Semantic surfaces ─── */
    --surface: #111827;
    --surface-raised: #1a2233;

    /* ─── Hero ─── */
    --hero-gradient-start: #111827;
    --hero-gradient-end: #0c1220;

    /* ─── Badge / accents ─── */
    --badge-text: #34D399;
    --green-accent: #34D399;
    --orange-accent: #FB923C;
    --purple-accent: #A78BFA;

    /* ─── Feature number backgrounds ─── */
    --green-num-bg: #0d2818;
    --orange-num-bg: #2a1f0a;
    --purple-num-bg: #1a1333;

    /* ─── CTA buttons ─── */
    --cta-btn-bg: rgba(255,255,255,0.15);
    --cta-btn-color: #ffffff;
    --cta-btn-alt-bg: rgba(255,255,255,0.15);
    --cta-btn-alt-color: #ffffff;

    /* ─── Component backgrounds ─── */
    --chat-ai-bg: #1a2233;
    --horizon-item-bg: #1a2233;
    --input-bg: #1a2233;

    /* ─── Interactive ─── */
    --blue-hover: #4b8ff0;

    /* ─── Header ─── */
    --header-bg: #111827;

    /* ─── CTA strip ─── */
    --cta-strip-bg: linear-gradient(135deg, #1a3a6e 0%, #1e293b 100%);
    --cta-strip-desc: rgba(255,255,255,0.6);

    /* ─── Typography ─── */
    --font-logo: "Orchestratio Sans", sans-serif;
    --font-body: 'Roboto', system-ui, sans-serif;

    /* ─── Motion ─── */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-buttery: cubic-bezier(0.32, 0.72, 0, 1);

    /* ─── Shadows ─── */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
    --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.4);
    --shadow-blue-glow: 0 8px 24px -8px rgba(91,159,255,0.6);

}

/* ─── Base ─── */
html {
    min-height: 100%;
    overflow-y: scroll;
}

body {
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--slate-800);
    background: var(--surface);
}

/* ─── Autofill fix (theme-aware) ─── */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    -webkit-text-fill-color: var(--slate-800) !important;
    background-color: var(--surface) !important;
}

/* ─── Animations ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up   { animation: fadeUp 0.6s ease-out both; }
.animate-fade-up-1 { animation-delay: 0.08s; }
.animate-fade-up-2 { animation-delay: 0.16s; }
.animate-fade-up-3 { animation-delay: 0.24s; }