/* ==========================================================================
   TENKASIBROS - DESIGN SYSTEM & CSS CUSTOM PROPERTIES (VARIABLES.CSS)
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       REFINED COLOR PALETTE (EXACT SPECIFICATION)
       ---------------------------------------------------------------------- */
    --color-bg-dark: #07111F;
    --color-bg-dark-rgb: 7, 17, 31;
    
    --color-surface-dark: #111827;
    --color-surface-dark-rgb: 17, 24, 39;

    --color-surface-card: #1E293B;
    --color-surface-card-rgb: 30, 41, 59;

    --color-primary-blue: #3B82F6;
    --color-primary-blue-rgb: 59, 130, 246;
    --color-primary-blue-dark: #1D4ED8;
    --color-primary-blue-light: #60A5FA;

    --color-glow-blue: #60A5FA;
    --color-glow-blue-rgb: 96, 165, 250;

    --color-white: #F8FAFC;
    --color-white-rgb: 248, 250, 252;

    --color-gray: #94A3B8;
    --color-gray-rgb: 148, 163, 184;

    --color-gray-muted: #64748B;
    --color-gray-dark: #334155;

    --color-accent-yellow: #FACC15;
    --color-accent-yellow-rgb: 250, 204, 21;

    --color-accent-green: #22C55E;
    --color-accent-green-rgb: 34, 197, 94;

    --color-accent-red: #EF4444;
    --color-accent-red-rgb: 239, 68, 68;

    /* ----------------------------------------------------------------------
       GLASSMORPHISM & GLOW TOKENS
       ---------------------------------------------------------------------- */
    --glass-bg: rgba(17, 24, 39, 0.7);
    --glass-bg-hover: rgba(30, 41, 59, 0.85);
    --glass-nav-bg: rgba(7, 17, 31, 0.82);
    --glass-border: rgba(96, 165, 250, 0.15);
    --glass-border-hover: rgba(96, 165, 250, 0.45);
    --glass-blur: blur(20px);
    --glass-blur-strong: blur(28px);
    --glass-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
    --glass-shadow-glow: 0 15px 40px -5px rgba(59, 130, 246, 0.35);

    /* Inner Glows */
    --inner-glow-blue: inset 0 0 25px rgba(96, 165, 250, 0.15);
    --ring-glow-gradient: linear-gradient(135deg, #3B82F6, #60A5FA, #FACC15, #22C55E, #3B82F6);

    /* ----------------------------------------------------------------------
       TYPOGRAPHY
       ---------------------------------------------------------------------- */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ----------------------------------------------------------------------
       SPACING & RADIUS
       ---------------------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* ----------------------------------------------------------------------
       TRANSITIONS & EASINGS
       ---------------------------------------------------------------------- */
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ----------------------------------------------------------------------
       Z-INDEX REGISTRY
       ---------------------------------------------------------------------- */
    --z-background: -1;
    --z-base: 1;
    --z-content: 10;
    --z-sticky: 100;
    --z-navbar: 1000;
    --z-modal: 2000;
    --z-preloader: 9999;
}