/* ==========================================
   BASE STYLES & CSS VARIABLES
   Move IT Education — v3.0 (рефакторинг)
   ========================================== */

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

html {
    font-size: 16px;
}

/* ==========================================
   CSS VARIABLES — Design System
   ========================================== */

:root {
    /* === COLOR PALETTE === */
    --color-bg-dark:    #2D4628;
    --color-bg-medium:  #1f3120;
    --color-bg-darkest: #141414;

    --color-orange-dark:  #E83100;
    --color-orange-light: #FF6933;
    --color-orange-peach: #FFA570;

    --color-beige-dark:  #FAD074;
    --color-beige-light: #ffe599;

    --color-white: #ffffff;
    --color-black: #000000;

    /* Semantic aliases (використовуйте замість хардкоду) */
    --color-light-orange: var(--color-orange-light);
    --color-dark-beige:   var(--color-beige-dark);
    --color-light-beige:  var(--color-beige-light);

    /* === GLASSMORPHISM === */
    --glass-bubble:        rgba(255, 165, 112, 0.25);
    --glass-bubble-light:  rgba(255, 165, 112, 0.15);
    --glass-bubble-medium: rgba(255, 165, 112, 0.28);
    --glass-bubble-strong: rgba(255, 165, 112, 0.32);
    --glass-beige:         rgba(250, 208, 116, 0.25);
    --glass-white:         rgba(255, 255, 255, 0.1);

    /* === SEMANTIC CARD COLORS === */
    /* Використовуйте ці змінні замість rgba() прямо в коді */
    --color-card-bg:         rgba(255, 165, 112, 0.15);   /* outer glassmorphism card */
    --color-card-border:     rgba(255, 165, 112, 0.25);
    --color-card-hover-border: rgba(255, 165, 112, 0.5);

    --color-inner-bg-dark:   rgba(45, 70, 40, 0.95);      /* dark inner card */
    --color-inner-bg-medium: rgba(45, 70, 40, 0.85);
    --color-inner-border:    rgba(255, 165, 112, 0.2);

    --color-glow-soft:   rgba(255, 229, 153, 0.15);       /* inset highlight */
    --color-glow-border: rgba(255, 229, 153, 0.1);
    --color-glow-text:   rgba(255, 229, 153, 0.4);

    /* === BLUR === */
    --blur-light:  blur(0.9375rem);
    --blur-medium: blur(1.25rem);
    --blur-strong: blur(1.875rem);

    /* === SPACING (rem) === */
    --spacing-xs:  0.625rem;
    --spacing-sm:  0.9375rem;
    --spacing-md:  1.5625rem;
    --spacing-lg:  2.5rem;
    --spacing-xl:  3.75rem;
    --spacing-xxl: 5rem;

    /* === BORDER RADIUS (rem) === */
    --radius-sm:    1.25rem;
    --radius-md:    1.875rem;
    --radius-lg:    2.5rem;
    --radius-xl:    3.125rem;
    --radius-round: 50%;

    /* === SHADOWS === */
    --shadow-sm:     0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
    --shadow-md:     0 0.9375rem 2.8125rem rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 1.875rem 5rem rgba(0, 0, 0, 0.5);
    --shadow-bubble: 0 1.5625rem 3.75rem rgba(0, 0, 0, 0.45);
    --shadow-card:   0 0.75rem 2.1875rem rgba(0, 0, 0, 0.35);
    --shadow-glow:   0 0 1.25rem rgba(255, 229, 153, 0.6);

    --drop-shadow-sm: drop-shadow(0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.3));
    --drop-shadow-md: drop-shadow(0 0.625rem 1.875rem rgba(0, 0, 0, 0.4));
    --drop-shadow-lg: drop-shadow(0 1.125rem 2.8125rem rgba(0, 0, 0, 0.55));

    /* === TRANSITIONS === */
    --transition-fast:   0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow:   0.6s ease;

    /* ✅ ДОДАНО: був відсутній, але використовувався в courses.css */
    --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === TYPOGRAPHY (rem) === */
    --font-main:      Arial, sans-serif;
    --font-size-xs:   0.625rem;
    --font-size-sm:   0.8125rem;
    --font-size-base: 1rem;
    --font-size-md:   1.125rem;
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;
    --font-size-2xl:  2rem;
    --font-size-3xl:  3rem;
    --font-size-4xl:  3.25rem;
    --font-size-hero: 5.2rem;

    /* === Z-INDEX === */
    --z-background:     0;
    --z-bubble:         1;
    --z-content:        2;
    --z-decoration:     3;
    --z-nav:            10;
    --z-decoration-top: 20;
    --z-modal:          100;
}

/* ==========================================
   BODY
   ========================================== */

body {
    font-family: var(--font-main);
    background: linear-gradient(180deg,
        var(--color-bg-dark)    0%,
        var(--color-bg-medium)  50%,
        var(--color-bg-darkest) 100%
    );
    min-height: 100vh;
    padding: 0 var(--spacing-sm);
    padding-top: 140px;
    color: var(--color-white);
    line-height: 1.6;
    font-size: var(--font-size-base);
}

@media (max-width: 768px) {
    body { padding-top: 110px; }
}

@media (max-width: 480px) {
    body { padding-top: 100px; }
}

/* ==========================================
   CONTAINER & UTILITIES
   ========================================== */

.container {
    max-width: 53.75rem;
    margin: 0 auto;
}

.center  { text-align: center; }
.hidden  { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================
   RESPONSIVE BASE
   ========================================== */

@media (max-width: 768px) {
    html {
        font-size: 14px;
        overflow-x: hidden;
    }
    body {
        padding: 0;
        overflow-x: hidden;
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
        overflow-x: hidden;
    }
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
}