/* ========================================
   EduMaps Design System
   designbrief.md'ye uygun CSS custom properties
   ======================================== */

:root {
    /* === COLORS === */

    /* Backgrounds */
    --em-bg-light: #ffffff;
    --em-bg-dark: #161616;
    --em-bg-neutral: #fafafa;
    --em-bg-surface: #f3f4f6;

    /* Text */
    --em-text-primary: #121926;
    --em-text-secondary: #697586;
    --em-text-tertiary: #9aa4b2;
    --em-text-on-dark: #ffffff;
    --em-text-on-dark-secondary: rgba(255, 255, 255, 0.7);

    /* Accents */
    --em-accent-cta: #e0ff00;
    --em-accent-cta-hover: #d4f000;
    --em-accent-interactive: #10b981;
    --em-accent-hover: #059669;
    --em-accent-brand: #10b981;

    /* Borders */
    --em-border: #e3e8ef;
    --em-border-dark: rgba(255, 255, 255, 0.1);

    /* Gradients */
    --em-gradient-hero: linear-gradient(135deg, #10b981, #059669, #e0ff00);
    --em-gradient-progress: linear-gradient(90deg, #a3e635, #10b981);
    --em-gradient-icon: linear-gradient(135deg, #10b981, #059669);

    /* === TYPOGRAPHY === */
    --em-font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* H1 */
    --em-h1-size: 52px;
    --em-h1-weight: 600;
    --em-h1-lh: 60px;
    --em-h1-ls: -0.02em;

    /* H2 */
    --em-h2-size: 40px;
    --em-h2-weight: 500;
    --em-h2-lh: 50px;
    --em-h2-ls: -0.02em;

    /* H3 */
    --em-h3-size: 36px;
    --em-h3-weight: 600;
    --em-h3-lh: 44px;
    --em-h3-ls: -0.03em;

    /* H4 */
    --em-h4-size: 32px;
    --em-h4-weight: 500;
    --em-h4-lh: 40px;
    --em-h4-ls: -0.01em;

    /* H5 */
    --em-h5-size: 24px;
    --em-h5-weight: 500;
    --em-h5-lh: 32px;
    --em-h5-ls: -0.02em;

    /* H6 */
    --em-h6-size: 20px;
    --em-h6-weight: 500;
    --em-h6-lh: 30px;
    --em-h6-ls: 0;

    /* Paragraph */
    --em-p-size: 16px;
    --em-p-weight: 400;
    --em-p-lh: 24px;

    /* Paragraph Large */
    --em-p-lg-size: 18px;
    --em-p-lg-weight: 400;
    --em-p-lg-lh: 27px;

    /* Label */
    --em-label-size: 14px;
    --em-label-weight: 500;
    --em-label-lh: 20px;

    /* Button Text */
    --em-btn-size: 16px;
    --em-btn-weight: 600;
    --em-btn-lh: 24px;

    /* === SPACING === */
    --em-space-xs: 4px;
    --em-space-sm: 8px;
    --em-space-md: 16px;
    --em-space-lg: 24px;
    --em-space-xl: 48px;
    --em-space-2xl: 80px;
    --em-space-3xl: 100px;

    /* === LAYOUT === */
    --em-container-max: 1304px;
    --em-container-padding: 20px;

    /* === BORDER RADIUS === */
    --em-radius-btn: 7px;
    --em-radius-sm: 10px;
    --em-radius-card-sm: 12px;
    --em-radius-card-lg: 16px;
    --em-radius-video: 24px;
    --em-radius-pill: 100px;

    /* === SHADOWS === */
    --em-shadow-light: 0 4px 20px rgba(0, 0, 0, 0.06);
    --em-shadow-medium: 0 20px 60px rgba(0, 0, 0, 0.12);
    --em-shadow-deep: 0 25px 80px rgba(0, 0, 0, 0.15);
    --em-shadow-card: 0 0 84px rgba(0, 0, 0, 0.03);
    --em-shadow-inset: rgba(238, 242, 246, 0.5) 0 -2px 0 0 inset;

    /* === TRANSITIONS === */
    --em-transition: 0.3s ease;
    --em-transition-fast: 0.2s ease;
    --em-transition-slow: 0.45s ease;
}