/* =============================================
   🎨 WAY TO SUCCESS LIBRARY – GLOBAL STYLES
   Luxury SaaS Web Shell – Dark Elegant Theme
   ============================================= */

/* ---------- CSS Variables (Design Tokens) ---------- */
:root {
    /* Core Brand Colors */
    --royal-blue: #2E5BFF;
    --electric-indigo: #4F46E5;
    --luxe-gold: #D4AF37;
    --platinum: #E5E7EB;

    /* Dark Theme Surface Colors */
    --bg-base: #090D16;           /* Midnight Navy */
    --bg-surface: #0F172A;        /* Deep Slate */
    --bg-elevated: #1E293B;        /* Surface Dark */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --border-color: rgba(255, 255, 255, 0.08);

    /* Glass Effects */
    --glass-bg-dark: rgba(15, 23, 42, 0.75);
    --glass-bg-light: rgba(255, 255, 255, 0.95);
    --glass-blur: 20px;

    /* Utility */
    --scrollbar-thumb: #334155;
    --scrollbar-thumb-hover: #475569;
    --selection-bg: #3B82F6;
    --selection-text: #FFFFFF;
}

/* ---------- Reset & Base ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Subtle gradient background for depth */
    background-image: radial-gradient(circle at 10% 20%, rgba(47, 91, 255, 0.05) 0%, transparent 50%),
                      radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
}

#root {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

canvas {
    max-width: 100vw !important;
    display: block;
    margin: 0 auto;
}

/* ---------- Remove default browser focus rings & outline rectangles ---------- */
button, input, select, textarea, a, [role="button"], div {
    outline: none !important;
    -webkit-focus-ring-color: transparent !important;
}

button:focus, button:focus-visible, button:hover,
div:focus, div:focus-visible, div:hover,
a:focus, a:focus-visible, a:hover {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- Text Selection ---------- */
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* ---------- Custom Smooth Scrollbar ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ---------- Glassmorphism Utilities ---------- */
.glass-panel {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-card {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* ---------- Material Symbols ---------- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ---------- Smooth transitions for interactive elements ---------- */
button, a, input, textarea, select {
    transition: all 0.2s ease-in-out;
}

/* ---------- Optional Gold Accent Class ---------- */
.gold-text {
    background: linear-gradient(135deg, #F5E7A3 0%, #D4AF37 50%, #B8962E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Responsive Typography Helper ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}