/**
 * PhotonFactor Science - Design Tokens & CSS Variables
 * Version 1.1 - Complete Design System
 */
:root {
    /* COLOR PALETTE (Gen-Z Modern Science Theme - Image Reference Match) */
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --primary-rgb: 124, 58, 237;
    --primary-light: #f3e8ff;
    
    --secondary: #ff7e47;
    --secondary-hover: #f97316;
    --secondary-rgb: 255, 126, 71;
    --secondary-light: #fff7ed;

    --accent-coral: #ff7e47;
    --accent-purple: #7c3aed;
    --accent-pink: #ec4899;
    --accent-pink-light: #fdf2f8;
    --accent-yellow: #f59e0b;
    --accent-yellow-light: #fffbeb;
    --accent-mint: #10b981;
    --accent-mint-light: #ecfdf5;
    --accent-sky: #0ea5e9;
    --accent-sky-light: #f0f9ff;

    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --info: #0ea5e9;
    --info-rgb: 14, 165, 233;

    /* BACKGROUNDS & CANVASES */
    --bg-light-warm: #fbf9f6;
    --bg-student: #fbf9f6;
    --bg-light-soft: #f4eee5;
    
    --background: #fbf9f6;
    --surface: #ffffff;
    --surface-hover: #fdfaf6;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;

    /* HOMEPAGE DESIGN SYSTEM TOKENS */
    --pf-bg-main: #fbf9f6;
    --pf-navy: #1e1b4b;
    --pf-purple: #7c3aed;
    --pf-purple-dark: #6d28d9;
    --pf-purple-light: #f5f3ff;
    --pf-coral: #ea580c;
    --pf-coral-light: #fff7ed;
    --pf-font-doodle: 'Caveat', cursive;

    /* CRISP WHITE CARDS & DARK HIGH-CONTRAST TYPOGRAPHY */
    --card-light-bg: #ffffff;
    --card-light-border: #ede9fe;
    --card-light-text: #1e1b4b;
    --card-light-muted: #64748b;

    /* TYPOGRAPHY COLORS */
    --text: #1e1b4b;
    --text-dark: #1e1b4b;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --text-contrast: #ffffff;

    /* BORDERS */
    --border: #ede9fe;
    --border-hover: #ddd6fe;
    --border-subtle: rgba(124, 58, 237, 0.08);

    /* GLOW EFFECTS & SHADOWS */
    --glow-primary: rgba(124, 58, 237, 0.18);
    --glow-secondary: rgba(234, 88, 12, 0.15);
    --glow-success: rgba(16, 185, 129, 0.15);
    --card-shadow: 0 4px 20px -2px rgba(100, 80, 60, 0.06);
    --card-shadow-hover: 0 10px 30px -4px rgba(124, 58, 237, 0.14);
    --shadow-soft-light: 0 4px 20px -2px rgba(100, 80, 60, 0.06);
    --shadow-sm: 0 2px 8px rgba(100, 80, 60, 0.04);

    /* BORDER RADIUS SCALE (Cute Rounded Corners) */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* TYPOGRAPHY */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.82rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1.05rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.4rem;
    --line-height-body: 1.65;
    --line-height-heading: 1.25;

    /* ACCESSIBILITY */
    --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.35);
    --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.35);
    --focus-ring-offset: 2px;

    /* TRANSITIONS */
    --transition-speed: 0.25s;
    --transition-fast: 0.15s;
    --transition-slow: 0.4s;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* COMPONENT SIZES */
    --sidebar-width: 260px;
    --topbar-height: 72px;
    --input-height: 48px;
    --btn-height: 48px;
    --btn-sm-height: 38px;
    --bottom-nav-height: 68px;
    /* SPACING SCALE */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
}