/* ============================================================
   Rooby Clouds — Shared Design System
   Dark mode (default) + Light mode via [data-theme="light"]
   ============================================================ */

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

/* ── CSS Custom Properties ── */
:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg:           #111118;
    --bg-alt:       #18181F;
    --bg-surface:   #1D1D27;
    --bg-elevated:  #252535;

    /* Text */
    --text:         #EEEEF5;
    --text-muted:   #8B8BAA;
    --text-faint:   #55556A;

    /* Brand */
    --primary:      #6366F1;
    --primary-soft: rgba(99,102,241,0.12);
    --primary-border: rgba(99,102,241,0.25);
    --primary-glow: rgba(99,102,241,0.22);
    --secondary:    #10B981;

    /* Borders */
    --border:       rgba(255,255,255,0.07);
    --border-md:    rgba(255,255,255,0.12);

    /* Glass */
    --glass-bg:     rgba(29,29,39,0.88);
    --glass-border: rgba(255,255,255,0.07);

    /* Navbar glass */
    --navbar-glass: rgba(17,17,24,0.92);

    /* Scrollbar */
    --scrollbar-track: #111118;
    --scrollbar-thumb: #6366F1;

    /* Dropdown */
    --dropdown-bg:  rgba(24,24,31,0.98);
}

[data-theme="light"] {
    /* Backgrounds */
    --bg:           #F5F6FA;
    --bg-alt:       #ECEEF5;
    --bg-surface:   #FFFFFF;
    --bg-elevated:  #F0F1F8;

    /* Text */
    --text:         #111125;
    --text-muted:   #5B6075;
    --text-faint:   #9098B0;

    /* Brand */
    --primary:      #4F52D4;
    --primary-soft: rgba(79,82,212,0.10);
    --primary-border: rgba(79,82,212,0.22);
    --primary-glow: rgba(79,82,212,0.18);
    --secondary:    #059669;

    /* Borders */
    --border:       rgba(0,0,0,0.08);
    --border-md:    rgba(0,0,0,0.14);

    /* Glass */
    --glass-bg:     rgba(255,255,255,0.88);
    --glass-border: rgba(0,0,0,0.08);

    /* Navbar glass */
    --navbar-glass: rgba(245,246,250,0.95);

    /* Scrollbar */
    --scrollbar-track: #ECEEF5;
    --scrollbar-thumb: #4F52D4;

    /* Dropdown */
    --dropdown-bg:  rgba(255,255,255,0.98);
}

/* ── Base Reset & Typography ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tailwind bg-dark/bg-darker/bg-surface overrides via CSS vars */
.site-bg       { background-color: var(--bg) !important; }
.site-bg-alt   { background-color: var(--bg-alt) !important; }
.site-surface  { background-color: var(--bg-surface) !important; }
.site-elevated { background-color: var(--bg-elevated) !important; }

/* ── Glass Morphism ── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* ── Navbar ── */
#navbar {
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#navbar.scrolled {
    background: var(--navbar-glass) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 30px rgba(0,0,0,0.12);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* ── Mobile Menu ── */
#mobile-menu {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

/* ── Dropdown Menu ── */
.dropdown-menu {
    background: var(--dropdown-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-md);
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--primary);
    color: white;
    font-weight: 700;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--primary-glow);
}

/* ── Glow hover ── */
.glow-hover:hover {
    box-shadow: 0 4px 28px var(--primary-glow);
}

/* ── Section backgrounds ── */
.section-dark    { background-color: var(--bg); }
.section-darker  { background-color: var(--bg-alt); }

/* ── Text helpers ── */
.text-body       { color: var(--text); }
.text-muted      { color: var(--text-muted) !important; }
.text-faint      { color: var(--text-faint) !important; }
.text-primary-c  { color: var(--primary) !important; }

/* ── Text gradient (hero/brand accent) ── */
.text-gradient {
    background: linear-gradient(135deg, #818CF8 0%, var(--primary) 60%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, #6366F1 0%, #4F52D4 60%, #3730C4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Cards ── */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
    border-color: var(--primary-border);
    box-shadow: 0 8px 32px var(--primary-glow);
}

/* ── Form Inputs ── */
.site-input {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-md) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-input::placeholder { color: var(--text-faint); }
.site-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    outline: none;
}
textarea.site-input { resize: vertical; }

/* ── Theme Toggle Button ── */
#theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--border-md);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
#theme-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-border);
    transform: rotate(15deg);
}
#theme-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: opacity 0.2s ease;
}
/* Sun icon visible in dark mode, moon in light */
#theme-toggle .icon-sun  { display: block; }
#theme-toggle .icon-moon { display: none; }
[data-theme="light"] #theme-toggle .icon-sun  { display: none; }
[data-theme="light"] #theme-toggle .icon-moon { display: block; }

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ── Float animation ── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }
*                          { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* ── Process Step Cards ── */
.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--primary-border);
    border-top: 3px solid var(--primary);
}

/* ── Footer ── */
footer {
    background-color: var(--bg-alt);
    border-top: 1px solid var(--border);
}

/* ── Selection color ── */
::selection { background: var(--primary-soft); color: var(--primary); }

/* ── FAQ accordion ── */
.faq-content { overflow: hidden; max-height: 0px; transition: max-height 0.4s ease; }

/* ── Pricing badge (ERP page) ── */
.price-badge {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    color: var(--primary);
}

/* ── Light mode: override Tailwind bg-dark etc. that Tailwind hardcodes ── */
[data-theme="light"] body {
    background-color: var(--bg);
    color: var(--text);
}
[data-theme="light"] .bg-dark,
[data-theme="light"] .hero-bg      { background-color: var(--bg) !important; }
[data-theme="light"] .bg-darker    { background-color: var(--bg-alt) !important; }
[data-theme="light"] .bg-surface   { background-color: var(--bg-surface) !important; }
[data-theme="light"] .text-white   { color: var(--text) !important; }
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 { color: var(--text-muted) !important; }
[data-theme="light"] .text-slate-500 { color: var(--text-faint) !important; }
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10 { border-color: var(--border) !important; }
[data-theme="light"] .bg-white\/5  { background-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] footer { background-color: var(--bg-alt) !important; }

/* Step connector arrows in light mode */
[data-theme="light"] .step-connector {
    background-color: var(--bg-elevated);
    border-color: var(--border-md);
}

/* hero-bg light override */
.hero-bg { background-color: var(--bg); border-bottom: 1px solid var(--border); }

/* ERP page: billing toggle light mode */
[data-theme="light"] .billing-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-md);
}

/* Responsive */
@media (max-width: 767px) {
    .animate-float { animation: none; }
}