/* ============================================
   RoxBox AI Learning Center — Design Tokens
   ============================================ */

:root {
    /* Primary: Bold purple */
    --color-primary:        #6C3CE9;
    --color-primary-dark:   #4A1DB8;
    --color-primary-light:  #9B7BF4;

    /* Accent: Punchy orange */
    --color-accent:         #FF6B35;
    --color-accent-dark:    #E04F1A;
    --color-accent-light:   #FF9B73;

    /* Success / CTA green */
    --color-success:        #00D26A;

    /* Neutrals */
    --color-dark:           #1A1A2E;
    --color-dark-mid:       #2D2D44;
    --color-gray:           #6B7280;
    --color-light-gray:     #E5E7EB;
    --color-off-white:      #F8F9FC;
    --color-white:          #FFFFFF;

    /* Gradients */
    --gradient-hero:        linear-gradient(135deg, #6C3CE9 0%, #FF6B35 100%);
    --gradient-card:        linear-gradient(180deg, #1A1A2E 0%, #2D2D44 100%);
    --gradient-accent:      linear-gradient(135deg, #FF6B35 0%, #FF9B73 100%);

    /* Typography */
    --font-heading:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:            'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:            'Fira Code', 'Consolas', 'Courier New', monospace;

    /* Font sizes */
    --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:   3.5rem;

    /* Font weights */
    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   900;

    /* Line heights */
    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    /* Spacing scale */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;

    /* Layout */
    --max-width:        1200px;
    --border-radius:    8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px rgba(108, 60, 233, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}