:root
{
    /* ========================================
     BRAND & COLORS
     ======================================== */
    /* Apple-inspired primary */
    --vs-primary: #0071e3;
    --vs-primary-hover: #0077ed;
    --vs-primary-dark: #0056b3;
    /* Brand accent (kept) */
    --vs-accent: #E8833A;
    --vs-accent-hover: #D47230;
    --vs-accent-soft: rgba(232, 131, 58, 0.12);
    /* Product colors (kept as specified) */
    --vs-schooltray: #2196F3;
    --vs-schooltray-light: #E3F2FD;
    --vs-jman: #FF9800;
    --vs-jman-light: #FFF3E0;
    --vs-linkweb: #4CAF50;
    --vs-linkweb-light: #E8F5E9;
    --vs-scholarstack: #9C27B0;
    --vs-scholarstack-light: #F3E5F5;
    --vs-readyserve: #00BCD4;
    --vs-readyserve-light: #d4f1f5;
    /* ========================================
     LIGHT THEME (dominant)
     ======================================== */
    --vs-light-bg: #ffffff;
    --vs-light-surface: #fbfbfd;
    --vs-light-text: #1d1d1f;
    --vs-light-text-v1: #6e6e72;
    --vs-light-text-secondary: #86868b;
    --vs-light-border: rgba(0, 0, 0, 0.06);
    /* ========================================
     DARK THEME (for hero sections)
     ======================================== */
    --vs-dark-bg: #000000;
    --vs-dark-surface: #0a0a0a;
    --vs-dark-surface-elevated: #1d1d1f;
    --vs-dark-text: #f5f5f7;
    --vs-dark-text-secondary: #86868b;
    --vs-dark-border: rgba(255, 255, 255, 0.08);
    /* ========================================
     SPACING (generous, Apple-style)
     ======================================== */
    --vs-space-xs: 0.25rem;
    --vs-space-sm: 0.5rem;
    --vs-space-md: 1rem;
    --vs-space-lg: 1.5rem;
    --vs-space-xl: 2rem;
    --vs-space-2xl: 3rem;
    --vs-space-3xl: 4rem;
    --vs-space-4xl: 6rem;
    --vs-space-5xl: 8rem;
    --vs-space-6xl: 12rem;
    /* ========================================
     BORDER RADIUS (refined)
     ======================================== */
    --vs-radius-sm: 8px;
    --vs-radius-md: 12px;
    --vs-radius-lg: 20px;
    --vs-radius-xl: 28px;
    --vs-radius-2xl: 40px;
    --vs-radius-full: 9999px;
    /* ========================================
     SHADOWS (subtle, minimal)
     ======================================== */
    --vs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --vs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --vs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --vs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --vs-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.12);
    --vs-shadow-glow: 0 0 40px rgba(232, 131, 58, 0.12);
    /* ========================================
     TRANSITIONS
     ======================================== */
    --vs-transition-fast: 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --vs-transition: 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    --vs-transition-slow: 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    /* ========================================
     CONTAINER & LAYOUT
     ======================================== */
    --vs-container-max: 1200px;
    --vs-content-max: 980px;
    --vs-content-narrow: 720px;
    --vs-container-padding: clamp(1rem, 2.5vw, 2rem);
    /* ========================================
     SECTION PADDING (generous)
     ======================================== */
    --vs-section-padding: clamp(60px, 10vw, 80px);
    /* ========================================
     TILE & NAVBAR
     ======================================== */
    --vs-tile-radius: 20px;
    --vs-tile-gap: 12px;
    --vs-navbar-height: 80px;
}