/*
 * Gafree — Design System CSS Variables
 * "Scholar's Slate" Brand Identity — Premium Educational
 * Primary: Warm Slate | Accent: Scholar Blue | Reward: Achievement Gold
 * Prefix: --g- (gafree)
 *
 * Design Direction: Smart, Modern, Trustworthy
 * References: Khan Academy clarity + Kahoot celebration moments
 */

:root {
    /* =====================================================
       PRIMARY BRAND — Warm Slate
       Sophisticated neutral that lets content shine
       ===================================================== */
    --g-primary: #2D3748;
    --g-primary-dark: #1A202C;
    --g-primary-light: #4A5568;
    --g-primary-bg: #F7FAFC;

    /* =====================================================
       ACCENT — Scholar Blue
       Used sparingly for interactive elements & focus states
       ===================================================== */
    --g-accent: #3182CE;
    --g-accent-dark: #2B6CB0;
    --g-accent-light: #63B3ED;
    --g-accent-bg: #EBF8FF;

    /* =====================================================
       REWARD COLORS — For gamification moments
       XP earned, achievements, streaks, celebrations
       ===================================================== */
    --g-reward-gold: #D69E2E;
    --g-reward-gold-light: #F6E05E;
    --g-reward-gold-bg: #FFFFF0;
    --g-secondary: #3182CE;       /* Backwards compatibility */
    --g-accent-gold: #D69E2E;     /* Backwards compatibility */

    /* =====================================================
       STATUS COLORS — Clear feedback
       WCAG AA compliant on white backgrounds
       ===================================================== */
    --g-success: #38A169;
    --g-success-dark: #2F855A;
    --g-success-bg: #F0FFF4;

    --g-warning: #C05621;
    --g-warning-dark: #9C4221;
    --g-warning-bg: #FFFAF0;

    --g-danger: #C53030;
    --g-danger-dark: #9B2C2C;
    --g-danger-bg: #FFF5F5;

    --g-info: #2B6CB0;
    --g-info-dark: #2C5282;
    --g-info-bg: #EBF8FF;

    /* =====================================================
       ACCENT PALETTE — For visual variety in content
       Cards, badges, tags, lesson categories
       ===================================================== */
    --g-accent-blue: #3182CE;
    --g-accent-purple: #6B46C1;
    --g-accent-amber: #C05621;
    --g-accent-green: #38A169;
    --g-accent-pink: #B83280;
    --g-accent-indigo: #5A67D8;
    --g-accent-teal: #319795;
    --g-accent-orange: #DD6B20;
    --g-accent-red: #C53030;

    /* =====================================================
       TEXT HIERARCHY — Warm slate, never pure black
       Excellent readability, WCAG AA compliant
       ===================================================== */
    --g-text-primary: #1A202C;
    --g-text-secondary: #4A5568;
    --g-text-tertiary: #718096;
    --g-text-muted: #A0AEC0;
    --g-text-inverse: #FFFFFF;

    /* =====================================================
       WARM NEUTRALS — Subtle warmth, never cold gray
       ===================================================== */
    --g-gray-50: #F7FAFC;
    --g-gray-100: #EDF2F7;
    --g-gray-200: #E2E8F0;
    --g-gray-300: #CBD5E0;
    --g-gray-400: #A0AEC0;
    --g-gray-500: #718096;
    --g-gray-600: #4A5568;
    --g-gray-700: #2D3748;
    --g-gray-800: #1A202C;
    --g-gray-900: #171923;

    /* =====================================================
       BACKGROUNDS — Clean, spacious, content-focused
       ===================================================== */
    --g-bg-body: #F7FAFC;
    --g-bg-card: #FFFFFF;
    --g-bg-sidebar: #FFFFFF;
    --g-bg-header: rgba(255, 255, 255, 0.97);
    --g-bg-input: #FFFFFF;
    --g-bg-hover: #EDF2F7;
    --g-bg-active: #E2E8F0;

    /* =====================================================
       BORDERS — Subtle definition without heaviness
       ===================================================== */
    --g-border-color: #E2E8F0;
    --g-border-light: #EDF2F7;
    --g-border-dark: #CBD5E0;

    /* =====================================================
       SPACING SCALE — Generous, breathable layouts
       ===================================================== */
    --g-spacing-xs: 0.25rem;   /* 4px */
    --g-spacing-sm: 0.5rem;    /* 8px */
    --g-spacing-md: 1rem;      /* 16px */
    --g-spacing-lg: 1.5rem;    /* 24px */
    --g-spacing-xl: 2rem;      /* 32px */
    --g-spacing-2xl: 3rem;     /* 48px */
    --g-spacing-3xl: 4rem;     /* 64px */

    /* =====================================================
       TYPOGRAPHY — Clean, readable, professional
       ===================================================== */
    --g-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --g-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --g-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

    --g-font-size-xs: 0.75rem;    /* 12px */
    --g-font-size-sm: 0.875rem;   /* 14px */
    --g-font-size-md: 1rem;       /* 16px */
    --g-font-size-lg: 1.125rem;   /* 18px */
    --g-font-size-xl: 1.25rem;    /* 20px */
    --g-font-size-2xl: 1.5rem;    /* 24px */
    --g-font-size-3xl: 1.875rem;  /* 30px */
    --g-font-size-4xl: 2.25rem;   /* 36px */

    --g-font-weight-normal: 400;
    --g-font-weight-medium: 500;
    --g-font-weight-semibold: 600;
    --g-font-weight-bold: 700;

    --g-line-height-tight: 1.25;
    --g-line-height: 1.5;
    --g-line-height-relaxed: 1.75;

    --g-letter-spacing-tight: -0.025em;
    --g-letter-spacing-normal: 0;
    --g-letter-spacing-wide: 0.025em;

    /* =====================================================
       BORDER RADIUS — Subtle roundness, not bubbly
       ===================================================== */
    --g-radius-sm: 0.25rem;   /* 4px */
    --g-radius-md: 0.375rem;  /* 6px */
    --g-radius-lg: 0.5rem;    /* 8px */
    --g-radius-xl: 0.75rem;   /* 12px */
    --g-radius-2xl: 1rem;     /* 16px */
    --g-radius-full: 9999px;

    /* =====================================================
       SHADOWS — Soft, layered depth
       ===================================================== */
    --g-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --g-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --g-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --g-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --g-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --g-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Focus ring for accessibility */
    --g-ring-color: rgba(49, 130, 206, 0.5);
    --g-ring: 0 0 0 3px var(--g-ring-color);

    /* =====================================================
       TRANSITIONS — Smooth, not bouncy
       Ease-out for natural deceleration
       ===================================================== */
    --g-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --g-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --g-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --g-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* =====================================================
       LAYOUT — Structured, responsive
       ===================================================== */
    --g-header-height: 64px;
    --g-sidebar-width: 64px;
    --g-sidebar-expanded: 240px;
    --g-content-max-width: 1200px;
    --g-content-reading-width: 720px;

    --g-z-dropdown: 50;
    --g-z-sticky: 75;
    --g-z-sidebar: 100;
    --g-z-header: 200;
    --g-z-overlay: 250;
    --g-z-modal: 300;
    --g-z-toast: 400;
    --g-z-tooltip: 500;
}

/* =====================================================
   DARK MODE — Sophisticated, not harsh
   ===================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --g-text-primary: #F7FAFC;
        --g-text-secondary: #E2E8F0;
        --g-text-tertiary: #A0AEC0;
        --g-text-muted: #718096;

        --g-bg-body: #0D1117;
        --g-bg-card: #161B22;
        --g-bg-sidebar: #161B22;
        --g-bg-header: rgba(22, 27, 34, 0.97);
        --g-bg-input: #21262D;
        --g-bg-hover: #21262D;
        --g-bg-active: #30363D;

        --g-border-color: #30363D;
        --g-border-light: #21262D;
        --g-border-dark: #484F58;

        --g-primary: #E2E8F0;
        --g-primary-dark: #F7FAFC;
        --g-primary-light: #A0AEC0;
        --g-primary-bg: #1A202C;

        --g-accent: #58A6FF;
        --g-accent-dark: #79C0FF;
        --g-accent-light: #388BFD;
        --g-accent-bg: #0D1117;

        --g-reward-gold: #F6E05E;
        --g-reward-gold-light: #FAF089;
        --g-reward-gold-bg: #1A1A0D;

        --g-success: #56D364;
        --g-success-bg: #0D1A0F;
        --g-warning: #E3B341;
        --g-warning-bg: #1A170D;
        --g-danger: #F85149;
        --g-danger-bg: #1A0D0D;
        --g-info: #58A6FF;
        --g-info-bg: #0D1117;

        --g-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --g-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --g-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

        --g-ring-color: rgba(88, 166, 255, 0.4);
    }
}

/* Explicit dark mode override */
[data-theme="dark"] {
    --g-text-primary: #F7FAFC;
    --g-text-secondary: #E2E8F0;
    --g-text-tertiary: #A0AEC0;
    --g-text-muted: #718096;

    --g-bg-body: #0D1117;
    --g-bg-card: #161B22;
    --g-bg-sidebar: #161B22;
    --g-bg-header: rgba(22, 27, 34, 0.97);
    --g-bg-input: #21262D;
    --g-bg-hover: #21262D;
    --g-bg-active: #30363D;

    --g-border-color: #30363D;
    --g-border-light: #21262D;
    --g-border-dark: #484F58;

    --g-primary: #E2E8F0;
    --g-primary-dark: #F7FAFC;
    --g-primary-light: #A0AEC0;
    --g-primary-bg: #1A202C;

    --g-accent: #58A6FF;
    --g-accent-dark: #79C0FF;
    --g-accent-light: #388BFD;
    --g-accent-bg: #0D1117;

    --g-reward-gold: #F6E05E;
    --g-reward-gold-light: #FAF089;
    --g-reward-gold-bg: #1A1A0D;

    --g-success: #56D364;
    --g-success-bg: #0D1A0F;
    --g-warning: #E3B341;
    --g-warning-bg: #1A170D;
    --g-danger: #F85149;
    --g-danger-bg: #1A0D0D;
    --g-info: #58A6FF;
    --g-info-bg: #0D1117;

    --g-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --g-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --g-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    --g-ring-color: rgba(88, 166, 255, 0.4);
}

/* =====================================================
   UTILITY CLASSES — Common patterns
   ===================================================== */

/* Focus visible for accessibility */
.g-focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--g-ring);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}