/* ============================================================================
 * CORE DESIGN SYSTEM
 * Design tokens, typography, and base styles
 * ============================================================================ */

:root {
    /* ========================================
     * FONT SYSTEM
     * ======================================== */

    /* Font Families */
    --font-family-primary: 'Arial', sans-serif;
    --font-family-secondary: 'Helvetica', sans-serif;
    --font-family-mono: 'Courier New', monospace;
    --font-family-display: 'Arial Black', sans-serif;

    /* Font Sizes - Responsive Scale */
    --font-size-xs: clamp(10px, 1.5vw, 12px);
    --font-size-sm: clamp(12px, 2vw, 14px);
    --font-size-base: clamp(14px, 2.5vw, 16px);
    --font-size-md: clamp(16px, 3vw, 18px);
    --font-size-lg: clamp(18px, 3.5vw, 20px);
    --font-size-xl: clamp(20px, 4vw, 24px);
    --font-size-2xl: clamp(24px, 5vw, 28px);
    --font-size-3xl: clamp(28px, 6vw, 32px);
    --font-size-4xl: clamp(32px, 7vw, 40px);
    --font-size-5xl: clamp(40px, 8vw, 48px);
    --font-size-6xl: clamp(48px, 10vw, 60px);

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;

    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* ========================================
     * COLOR PALETTE
     * ======================================== */

    /* Base Colors */
    --color-green: #219150;
    --color-orange: #FF7F3F;
    --color-blue: #3498DB;
    --color-pink: #FF4D6D;
    --color-purple: #9B59B6;
    --color-aqua: #1ABC9C;
    --color-red: #E74C3C;
    --color-yellow: #FFF91A;
    --color-gold: #F1C40F;
    --color-silver: #BDC3C7;
    --color-salmon: #FF6B61;
    --color-white: #FFFFFF;
    --color-orange: #ffab40;

    /* Light Variants */
    --color-green-light: #58D68D;
    --color-orange-light: #FFB74D;
    --color-blue-light: #5EB2E7;
    --color-pink-light: #FF738C;
    --color-purple-light: #B777D9;
    --color-aqua-light: #48D1B6;
    --color-rose-light: #EF6AA9;
    --color-yellow-light: #FFF59D;
    --color-gold-light: #F5D54A;
    --color-sand-light: #DEC3A3;
    --color-salmon-light: #FF8F83;
    --color-white-light: #FFFFFF;

    /* Dark Variants */
    --color-green-dark: #0B803D;
    --color-orange-dark: #E56529;
    --color-blue-dark: #2F5F8B;
    --color-pink-dark: #D63865;
    --color-purple-dark: #7E3E99;
    --color-aqua-dark: #139A82;
    --color-red-dark: #B93B06;
    --color-yellow-dark: #D68300;
    --color-gold-dark: #BFA70B;
    --color-sand-dark: #B4947C;
    --color-salmon-dark: #C94A40;
    --color-white-dark: #D9D9D9;

    /* Grayscale */
    --color-black: #000000;

    /* ========================================
     * UI COMPONENT COLORS
     * ======================================== */
    --color-button-next: var(--color-gold);
    --color-button-next-hover: var(--color-gold-dark);
    --color-button-previous: var(--color-gold);
    --color-button-previous-hover: var(--color-gold-dark);
    --color-button-disabled: var(--color-gold-light);

    --color-quiz-correct: var(--color-green);
    --color-quiz-correct-bg: var(--color-green-light);
    --color-quiz-correct-bg-light: var(--color-green-light);

    --color-quiz-incorrect: var(--color-salmon);
    --color-quiz-incorrect-bg: var(--color-salmon);
    --color-quiz-incorrect-bg-light: var(--color-salmon-light);

    --color-dialog-bg: var(--color-white);
    --color-dialog-border: transparent;
    --color-dialog-text: var(--color-black);

    /* ========================================
     * TEXT AREA STYLING VARIABLES
     * ======================================== */
    --textarea-incorrect-color: var(--color-white);
    --textarea-incorrect-bg: var(--color-salmon);
    --textarea-incorrect-border: var(--color-salmon-dark);

    --textarea-correct-color: var(--color-white);
    --textarea-correct-bg: var(--color-green);
    --textarea-correct-border: var(--color-green-dark);

    --textarea-hint-color: var(--color-white);
    --textarea-hint-bg: transparent;
    --textarea-hint-border: var(--color-white);

    /* ========================================
     * BACKGROUND & OVERLAY COLORS
     * ======================================== */
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-light: rgba(255, 255, 255, 0.1);
    --color-backdrop: rgba(0, 0, 0, 0.3);

    --background-main-image: url('../assets/bg.png');
    --background-color: var(--color-black);
    --background-overlay-opacity: 0.0;

    /* ========================================
     * SPACING SYSTEM
     * ======================================== */
    --spacing-xs: clamp(2px, 0.5vw, 4px);
    --spacing-sm: clamp(4px, 1vw, 8px);
    --spacing-md: clamp(8px, 1.5vw, 12px);
    --spacing-lg: clamp(12px, 2vw, 16px);
    --spacing-xl: clamp(16px, 3vw, 24px);
    --spacing-2xl: clamp(24px, 4vw, 32px);
    --spacing-3xl: clamp(32px, 5vw, 48px);
    --spacing-4xl: clamp(48px, 6vw, 64px);

    /* ========================================
     * BORDER & SHADOW VARIABLES
     * ======================================== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 15px;
    --border-radius-xl: 20px;
    --border-radius-full: 50%;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 15px;

    /* ========================================
     * ANIMATION VARIABLES
     * ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    --animation-pulse-duration: 2s;
    --animation-highlight-duration: 1.5s;

    /* ========================================
     * Z-INDEX SCALE - LOGICAL STACKING ORDER
     * ======================================== */
    --z-base: 1;
    /* Base content layer */
    --z-content: 10;
    /* Page content elements */
    --z-elevated: 20;
    /* Slightly elevated content */
    --z-header: 30;
    /* Page headers and navigation */
    --z-floating: 40;
    /* Floating elements */
    --z-dropdown: 50;
    /* Dropdown menus */
    --z-modal: 60;
    /* Modal dialogs */
    --z-tooltip: 70;
    /* Tooltips and hints */
    --z-button: 80;
    /* Interactive buttons */
    --z-notification: 90;
    /* Notifications and alerts */
    --z-overlay: 100;
    /* Development overlays */
    --z-debug: 110;
    /* Debug tools and overlays */

    /* ========================================
     * LEGACY VARIABLES (for compatibility)
     * ======================================== */
    --main-background-image: var(--background-color);
    --overlay-opacity: var(--background-overlay-opacity);
    --dialogue-box-fill-color: var(--color-dialog-bg);
    --dialogue-border-color: var(--color-dialog-border);
    --container-border-radius: var(--border-radius-md);
    --clr-white: var(--color-white);
    --clr-white-dark: var(--color-white-dark);
}

/* ============================================================================
 * BASE STYLES & RESET
 * ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    overflow: hidden;
    background: var(--background-color) var(--background-main-image) center center / cover no-repeat;
}

/* ============================================================================
 * TYPOGRAPHY UTILITIES
 * ============================================================================ */

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

.text-5xl {
    font-size: var(--font-size-5xl);
}

.text-6xl {
    font-size: var(--font-size-6xl);
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.font-black {
    font-weight: var(--font-weight-black);
}

.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-snug {
    line-height: var(--line-height-snug);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.leading-loose {
    line-height: var(--line-height-loose);
}

.tracking-tighter {
    letter-spacing: var(--letter-spacing-tighter);
}

.tracking-tight {
    letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
    letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
    letter-spacing: var(--letter-spacing-wide);
}

.tracking-wider {
    letter-spacing: var(--letter-spacing-wider);
}

.tracking-widest {
    letter-spacing: var(--letter-spacing-widest);
}

/* ============================================================================
 * SPACING UTILITIES
 * ============================================================================ */

.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.p-2xl {
    padding: var(--spacing-2xl);
}

.p-3xl {
    padding: var(--spacing-3xl);
}

.p-4xl {
    padding: var(--spacing-4xl);
}

.m-xs {
    margin: var(--spacing-xs);
}

.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.m-xl {
    margin: var(--spacing-xl);
}

.m-2xl {
    margin: var(--spacing-2xl);
}

.m-3xl {
    margin: var(--spacing-3xl);
}

.m-4xl {
    margin: var(--spacing-4xl);
}

/* ============================================================================
 * MAIN APPLICATION CONTAINER
 * ============================================================================ */

.main-container {
    width: 100vw;
    height: 100vh;
    border-radius: var(--border-radius-md);
    background: var(--background-color) var(--background-main-image) center center / cover no-repeat;
    overflow: hidden;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-black);
    opacity: var(--background-overlay-opacity);
    pointer-events: none;
    z-index: var(--z-base);
    border-radius: var(--border-radius-md);
}

/* CRITICAL: Fix flexbox interference with absolute positioning */
.main-container.math-app-container {
    /* Override flex behavior that interferes with absolute positioning */
    display: block !important;
    /* Ensure children position relative to this container */
    position: relative !important;
}