/*
 Theme Name:   Know Your Dosh Child Theme
 Theme URI:    https://www.knowyourdosh.com
 Description:  Custom child theme for Know Your Dosh rebrand - Elementor compatible
 Author:       Know Your Dosh
 Author URI:   https://www.knowyourdosh.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  kyd-child
*/

/* ==========================================================================
   KNOW YOUR DOSH - DESIGN SYSTEM
   ========================================================================== */

:root {
    /* ==================== COLORS ==================== */
    
    /* Primary Colors */
    --kyd-primary: #2A2B7C;
    --kyd-primary-dark: #1E1F5C;
    --kyd-primary-light: #3D3E9E;
    
    /* Secondary/Accent Colors */
    --kyd-white: #FFFFFF;
    --kyd-black: #000000;
    --kyd-gray-light: #F5F5F5;
    --kyd-gray: #949494;
    
    /* Gradient Colors */
    --kyd-gradient-start: #2A2B7C;
    --kyd-gradient-end: #4B4CBF;
    
    /* ==================== TYPOGRAPHY ==================== */
    
    /* Font Family */
    --kyd-font-primary: 'Poppins', sans-serif;
    
    /* Font Weights */
    --kyd-font-regular: 400;
    --kyd-font-medium: 500;
    --kyd-font-semibold: 600;
    --kyd-font-bold: 700;
    --kyd-font-extrabold: 800;
    
    /* Font Sizes - Desktop */
    --kyd-text-hero: 48px;
    --kyd-text-h1: 86px;
    --kyd-text-h2: 48px;
    --kyd-text-h3: 32px;
    --kyd-text-body: 28px;
    --kyd-text-body-sm: 24px;
    --kyd-text-nav: 26px;
    --kyd-text-button: 30px;
    --kyd-text-small: 12px;
    
    /* Line Heights */
    --kyd-line-height-tight: 1.1;
    --kyd-line-height-normal: 1.4;
    --kyd-line-height-relaxed: 1.5;
    --kyd-line-height-loose: 1.6;
    
    /* Letter Spacing */
    --kyd-tracking-tight: -2.58px;
    --kyd-tracking-normal: -0.84px;
    
    /* ==================== SPACING ==================== */
    
    --kyd-space-xs: 8px;
    --kyd-space-sm: 12px;
    --kyd-space-md: 16px;
    --kyd-space-lg: 24px;
    --kyd-space-xl: 36px;
    --kyd-space-2xl: 48px;
    --kyd-space-3xl: 64px;
    --kyd-space-4xl: 96px;
    --kyd-space-5xl: 128px;
    
    /* ==================== BORDERS & RADIUS ==================== */
    
    --kyd-radius-sm: 8px;
    --kyd-radius-md: 16px;
    --kyd-radius-lg: 24px;
    --kyd-radius-pill: 38px;
    --kyd-radius-circle: 50%;
    
    --kyd-border-width: 2px;
    
    /* ==================== SHADOWS ==================== */
    
    --kyd-shadow-sm: 0 2px 4px rgba(42, 43, 124, 0.1);
    --kyd-shadow-md: 0 4px 12px rgba(42, 43, 124, 0.15);
    --kyd-shadow-lg: 0 8px 24px rgba(42, 43, 124, 0.2);
    
    /* ==================== TRANSITIONS ==================== */
    
    --kyd-transition-fast: 0.2s ease;
    --kyd-transition-normal: 0.3s ease;
    --kyd-transition-slow: 0.5s ease;
    
    /* ==================== LAYOUT ==================== */
    
    --kyd-container-max: 1440px;
    --kyd-container-content: 1200px;
    --kyd-navbar-height: 116px;
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY SCALING
   ========================================================================== */

@media (max-width: 1200px) {
    :root {
        --kyd-text-h1: 64px;
        --kyd-text-h2: 40px;
        --kyd-text-h3: 28px;
        --kyd-text-body: 22px;
        --kyd-text-body-sm: 20px;
    }
}

@media (max-width: 992px) {
    :root {
        --kyd-text-h1: 48px;
        --kyd-text-h2: 36px;
        --kyd-text-h3: 24px;
        --kyd-text-body: 18px;
        --kyd-text-body-sm: 16px;
        --kyd-text-nav: 18px;
        --kyd-text-button: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --kyd-text-hero: 32px;
        --kyd-text-h1: 36px;
        --kyd-text-h2: 28px;
        --kyd-text-h3: 22px;
        --kyd-text-body: 16px;
        --kyd-text-body-sm: 14px;
        --kyd-text-button: 18px;
        --kyd-navbar-height: 80px;
    }
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
    font-family: var(--kyd-font-primary);
    font-weight: var(--kyd-font-regular);
    color: var(--kyd-black);
    line-height: var(--kyd-line-height-normal);
    overflow-x: hidden;
}

/* Import Poppins from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');