/*
 * javired.com — Design System v3 PREMIUM
 * Inspired by: Linear, Vercel, Stripe — the best SaaS design
 */

/* ═══════════════════════════════════════════════════════
   DARK MODE — Deep & Rich
   ═══════════════════════════════════════════════════════ */
:root {
    /* ─── Backgrounds — distinct layered blacks ───────── */
    --bg-primary:       #05050a;        /* near-black base */
    --bg-secondary:     #0d0d17;        /* slightly lighter */
    --bg-tertiary:      #141424;        /* card interior */
    --bg-elevated:      #1c1c30;        /* elevated surfaces */
    --surface:          #1a1a2e;        /* components */
    --surface-hover:    #22223c;

    /* ─── Borders — visible but subtle ───────────────── */
    --border:           rgba(255,255,255,0.07);
    --border-hover:     rgba(255,255,255,0.14);
    --border-strong:    rgba(255,255,255,0.20);
    --border-accent:    rgba(139,92,246,0.35);

    /* ─── Text — high contrast ────────────────────────── */
    --text-primary:     #ffffff;
    --text-secondary:   #b4b4cc;
    --text-muted:       #6e6e85;
    --text-inverse:     #0a0a14;

    /* ─── Accent — electric violet ────────────────────── */
    --accent-50:         #f5f3ff;
    --accent-100:        #ede9fe;
    --accent-400:        #a78bfa;
    --accent-500:        #8b5cf6;
    --accent-600:        #7c3aed;
    --accent-primary:    #8b5cf6;
    --accent-secondary:  #a78bfa;
    --accent-tertiary:   #c4b5fd;
    --accent-dim:        rgba(139,92,246,0.12);
    --accent-dim-strong: rgba(139,92,246,0.20);

    /* ─── Premium Gradients ───────────────────────────── */
    --gradient-primary:   linear-gradient(135deg, #7c3aed 0%, #8b5cf6 40%, #a855f7 70%, #ec4899 100%);
    --gradient-hero-text: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 30%, #8b5cf6 60%, #7c3aed 100%);
    --gradient-cta:       linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a855f7 100%);
    --gradient-card-bg:   linear-gradient(145deg, rgba(28,28,48,0.9) 0%, rgba(20,20,36,0.6) 100%);
    --gradient-section:   linear-gradient(180deg, transparent 0%, rgba(139,92,246,0.03) 50%, transparent 100%);
    --gradient-shimmer:   linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.06) 30%, rgba(168,85,247,0.10) 50%, rgba(139,92,246,0.06) 70%, transparent 100%);
    --gradient-border:    linear-gradient(135deg, rgba(139,92,246,0.5) 0%, rgba(168,85,247,0.2) 50%, rgba(236,72,153,0.3) 100%);

    /* ─── Glow / Halo ─────────────────────────────────── */
    --glow-accent:        0 0 24px rgba(139,92,246,0.45), 0 0 80px rgba(139,92,246,0.15);
    --glow-accent-sm:     0 0 12px rgba(139,92,246,0.40);
    --glow-pink:          0 0 24px rgba(236,72,153,0.35);
    --glow-card:          0 4px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    --glow-card-hover:    0 8px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    --glow-hero:          0 0 120px rgba(139,92,246,0.20), 0 0 300px rgba(168,85,247,0.08);

    /* ─── Gold (Enterprise) ───────────────────────────── */
    --gold:              #f59e0b;
    --gold-light:        #fbbf24;
    --gold-dim:          rgba(245,158,11,0.12);
    --gradient-gold:     linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --glow-gold:         0 0 20px rgba(245,158,11,0.35), 0 0 60px rgba(245,158,11,0.12);

    /* ─── Status ──────────────────────────────────────── */
    --success:           #10b981;
    --success-dim:       rgba(16,185,129,0.12);
    --error:             #ef4444;
    --error-dim:         rgba(239,68,68,0.12);
    --warning:           #f59e0b;

    /* ─── WhatsApp ────────────────────────────────────── */
    --whatsapp:          #25d366;
    --whatsapp-dark:     #128c7e;
    --glow-whatsapp:     0 0 24px rgba(37,211,102,0.45), 0 0 60px rgba(37,211,102,0.15);

    /* ─── Glass ───────────────────────────────────────── */
    --glass-bg:          rgba(5, 5, 10, 0.85);
    --glass-border:      rgba(255,255,255,0.06);
    --glass-card:        rgba(26, 26, 46, 0.70);
    --glass-card-border: rgba(255,255,255,0.08);

    /* ─── Shadows ─────────────────────────────────────── */
    --shadow-xs:  0 1px 4px rgba(0,0,0,0.4);
    --shadow-sm:  0 2px 10px rgba(0,0,0,0.5);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.60);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.65);
    --shadow-2xl: 0 32px 80px rgba(0,0,0,0.70);
    --shadow-card: var(--glow-card);

    /* ─── Overlay ─────────────────────────────────────── */
    --overlay: rgba(0,0,0,0.75);

    /* ─── Typography ──────────────────────────────────── */
    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.5rem;
    --fs-4xl:  3rem;
    --fs-hero: clamp(2.75rem, 5.5vw, 5rem);

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    --lh-tight:   1.05;
    --lh-heading: 1.15;
    --lh-body:    1.65;
    --lh-relaxed: 1.80;

    /* ─── Spacing ─────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Legacy aliases */
    --space-2xs: var(--space-1);
    --space-xs:  var(--space-2);
    --space-sm:  var(--space-3);
    --space-md:  var(--space-4);
    --space-lg:  var(--space-6);
    --space-xl:  var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);
    --space-4xl: var(--space-24);

    --section-padding: clamp(5rem, 10vw, 9rem);

    /* ─── Border Radius ───────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    /* ─── Easing ──────────────────────────────────────── */
    --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce:  cubic-bezier(0.175, 0.885, 0.32, 1.4);

    --t-fast:   120ms var(--ease-smooth);
    --t-base:   220ms var(--ease-smooth);
    --t-slow:   380ms var(--ease-out);
    --t-reveal: 650ms var(--ease-out);

    /* Legacy aliases */
    --transition-fast:   var(--t-fast);
    --transition-base:   var(--t-base);
    --transition-slow:   var(--t-slow);
    --transition-reveal: var(--t-reveal);

    /* ─── Z-index ─────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-whatsapp: 800;

    /* ─── Layout ──────────────────────────────────────── */
    --container-max: 1200px;
    --container-pad: 1.5rem;
    --header-height: 68px;
}

@media (min-width: 768px)  { :root { --container-pad: 2rem; } }
@media (min-width: 1280px) { :root { --container-pad: 2.5rem; } }

/* ═══════════════════════════════════════════════════════
   LIGHT MODE — Clean, High-Contrast, Vibrant
   Like Stripe/Linear light mode
   ═══════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* ─── Backgrounds — pure white with depth ─────────── */
    --bg-primary:     #ffffff;
    --bg-secondary:   #f9fafb;
    --bg-tertiary:    #f3f4f6;
    --bg-elevated:    #ffffff;
    --surface:        #ffffff;
    --surface-hover:  #f9fafb;

    /* ─── Borders — crisp and visible ────────────────── */
    --border:        rgba(0,0,0,0.10);
    --border-hover:  rgba(0,0,0,0.18);
    --border-strong: rgba(0,0,0,0.25);
    --border-accent: rgba(109,40,217,0.30);

    /* ─── Text — true black for maximum contrast ──────── */
    --text-primary:   #0a0a0f;
    --text-secondary: #374151;
    --text-muted:     #6b7280;
    --text-inverse:   #ffffff;

    /* ─── Accent — deeper purple for light bg ─────────── */
    --accent-400:        #7c3aed;
    --accent-500:        #6d28d9;
    --accent-600:        #5b21b6;
    --accent-primary:    #6d28d9;
    --accent-secondary:  #7c3aed;
    --accent-tertiary:   #8b5cf6;
    --accent-dim:        rgba(109,40,217,0.08);
    --accent-dim-strong: rgba(109,40,217,0.14);

    /* ─── Gradients — vibrant on white ─────────────────── */
    --gradient-primary:   linear-gradient(135deg, #5b21b6 0%, #6d28d9 40%, #7c3aed 70%, #be185d 100%);
    --gradient-hero-text: linear-gradient(135deg, #5b21b6 0%, #6d28d9 40%, #7c3aed 80%);
    --gradient-cta:       linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    --gradient-card-bg:   linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
    --gradient-section:   linear-gradient(180deg, transparent 0%, rgba(109,40,217,0.02) 50%, transparent 100%);
    --gradient-shimmer:   linear-gradient(90deg, transparent 0%, rgba(109,40,217,0.04) 50%, transparent 100%);
    --gradient-border:    linear-gradient(135deg, rgba(109,40,217,0.3) 0%, rgba(139,92,246,0.15) 100%);

    /* ─── Glows — subtle on light ─────────────────────── */
    --glow-accent:       0 4px 20px rgba(109,40,217,0.18), 0 1px 3px rgba(109,40,217,0.12);
    --glow-accent-sm:    0 2px 8px rgba(109,40,217,0.15);
    --glow-card:         0 1px 3px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.05);
    --glow-card-hover:   0 4px 30px rgba(0,0,0,0.10), 0 0 0 1px rgba(109,40,217,0.14);
    --glow-hero:         0 0 100px rgba(109,40,217,0.08);

    --glow-gold:  0 4px 20px rgba(245,158,11,0.25);
    --glow-whatsapp: 0 4px 20px rgba(37,211,102,0.30);

    /* ─── Shadows — proper light mode shadows ──────────── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-xl:  0 20px 50px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-2xl: 0 32px 64px rgba(0,0,0,0.12);
    --shadow-card: var(--glow-card);

    /* ─── Glass ────────────────────────────────────────── */
    --glass-bg:          rgba(255,255,255,0.92);
    --glass-border:      rgba(0,0,0,0.08);
    --glass-card:        rgba(255,255,255,0.95);
    --glass-card-border: rgba(0,0,0,0.08);

    --overlay: rgba(0,0,0,0.35);
    --gold: #d97706;
    --gold-light: #f59e0b;
    --gold-dim: rgba(217,119,6,0.10);
}

/* ─── Global Theme Transition ─────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) transparent;
}

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--gradient-cta);
    border-radius: var(--radius-full);
}