/* ============================================================
   MetaoFly — Dark Tech Design System Tokens
   Pure English Typography | Obsidian & Neon Aesthetic
   ============================================================ */
/* Typography fonts preconnected in header.php for non-blocking parallel delivery */
:root {
    color-scheme: dark;

    /* ── Dark Tech Color System ────────────────────────── */
    --color-bg:             #07090e;
    --color-bg-raised:      #0d121c;
    --color-bg-surface:     #121926;
    --color-bg-card:        rgba(255, 255, 255, 0.035);
    --color-bg-card-hover:  rgba(255, 255, 255, 0.065);
    --color-bg-glass:       rgba(13, 18, 28, 0.75);
    --color-bg-glass-hover: rgba(22, 30, 46, 0.85);
    --color-bg-input:       rgba(255, 255, 255, 0.04);
    --color-bg-input-focus: rgba(255, 255, 255, 0.07);

    /* ── Primary Brand & Luminous Accents ─────────────────────────── */
    --color-accent-primary:      #a855f7; /* Tech Purple */
    --color-accent-primary-hover:#9333ea;
    --color-accent-purple:       #a855f7;
    --color-accent-purple-light: #c084fc;
    --color-accent-violet:       #8b5cf6;
    --color-accent-indigo:       #6366f1;
    --color-accent-blue:         #3b82f6;
    --color-accent-cyan:         #a855f7; /* Coherent purple accent */
    --color-accent-teal:         #00f0ff;
    --color-accent-pink:         #ec4899;
    --color-accent-emerald:      #10b981;
    --color-accent-amber:        #f59e0b;

    /* ── Text Hierarchy (English Clean) ───────────────── */
    --color-text:           #ffffff;
    --color-text-dim:       #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-muted:     #64748b;
    --color-text-ghost:     #475569;

    /* ── Borders & Outlines ───────────────────────────── */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-hover:   rgba(255, 255, 255, 0.18);
    --color-border-active:  rgba(168, 85, 247, 0.55);
    --color-border-glow:    rgba(168, 85, 247, 0.35);

    /* ── Gradients ────────────────────────────────────── */
    --gradient-hero-text:   linear-gradient(135deg, #ffffff 20%, #e2e8f0 60%, #c084fc 100%);
    --gradient-brand:       linear-gradient(135deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(124,58,237,0.08));
    --gradient-card:        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    --gradient-glow-purple: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
    --gradient-glow-cyan:   radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
    --gradient-glow-violet: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, transparent 70%);

    /* ── Typography (100% English Web Stack) ──────────── */
    --font-heading:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:            'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* ── Fluid Typography Scale ───────────────────────── */
    --text-xs:    clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
    --text-sm:    clamp(0.82rem, 0.78rem + 0.25vw, 0.9rem);
    --text-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --text-lg:    clamp(1.1rem,  1.02rem + 0.35vw, 1.22rem);
    --text-xl:    clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
    --text-2xl:   clamp(1.5rem,  1.35rem + 0.8vw, 1.85rem);
    --text-3xl:   clamp(1.85rem, 1.6rem + 1.2vw, 2.4rem);
    --text-4xl:   clamp(2.3rem,  1.9rem + 1.8vw, 3.2rem);
    --text-5xl:   clamp(2.8rem,  2.2rem + 2.5vw, 4.2rem);
    --text-6xl:   clamp(3.4rem,  2.5rem + 3.8vw, 5.5rem);

    /* ── 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;

    /* ── Radii ────────────────────────────────────────── */
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* ── Elevation & Glow Shadows ─────────────────────── */
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg:          0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-glow-purple: 0 0 25px rgba(168, 85, 247, 0.4);
    --shadow-glow-violet: 0 0 25px rgba(139, 92, 246, 0.35);
    --shadow-glow-cyan:   0 0 25px rgba(168, 85, 247, 0.4);
    --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* ── Layout ───────────────────────────────────────── */
    --container-max:     1280px;
    --container-narrow:  800px;
    --container-padding: clamp(1.25rem, 4vw, 2.5rem);

    /* ── Transitions ──────────────────────────────────── */
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:    150ms;
    --dur-normal:  250ms;
    --dur-slow:    450ms;

    /* ── Z-Index Hierarchy ────────────────────────────── */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-header:             1000;
    --z-drawer-backdrop:    1090;
    --z-drawer:             1100;
    --z-modal-backdrop:     1190;
    --z-modal:              1200;
    --z-toast:              1500;
    --z-lightbox:           99999;
    /* ── Previous Theme Variable Compatibility Aliases ── */
    --color-accent-1:       var(--color-accent-purple);
    --color-accent-2:       var(--color-accent-purple-light);
    --color-accent-3:       #06b6d4;
    --color-accent-warm:    var(--color-accent-amber);
    --color-text-2:         var(--color-text-secondary);
    --color-text-3:         var(--color-text-muted);
    --radius-2xl:           32px;
    --font-sans:            var(--font-body);
    --gradient-accent:      var(--gradient-brand);
}