/*!
Theme Name: Kadence Robotics
Theme URI: https://www.beerobotis.com/
Description: Kadence Robotics Child Theme - A modern e-commerce theme for robotics and AI technology products, inspired by WoodMart design.
Author: Beerobotis Team
Author URI: https://www.beerobotis.com/
Template: kadence
Version: 1.1.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-robotics
Requires PHP: 7.4
*/

/* ============================================
   GLOBAL VARIABLES
   ============================================ */
:root {
    /* Colors */
    --kd-primary-color: #79b38a;
    --kd-primary-color-hover: #669b6b;
    --kd-secondary-color: #fbbc34;
    --kd-secondary-color-hover: #e5a82b;
    --kd-text-color: #777777;
    --kd-text-color-light: #999999;
    --kd-title-color: #242424;
    --kd-title-color-hover: #333333;
    --kd-background-color: #ffffff;
    --kd-background-light: #f9f9f9;
    --kd-border-color: #e8e8e8;

    /* Typography */
    --kd-font-primary: 'Karla', Arial, Helvetica, sans-serif;
    --kd-font-title: 'Lora', Arial, Helvetica, sans-serif;
    --kd-font-alternative: 'Lato', Arial, Helvetica, sans-serif;

    /* Font Sizes */
    --kd-font-size-xs: 12px;
    --kd-font-size-sm: 14px;
    --kd-font-size-md: 16px;
    --kd-font-size-lg: 18px;
    --kd-font-size-xl: 20px;
    --kd-font-size-2xl: 24px;
    --kd-font-size-3xl: 32px;
    --kd-font-size-4xl: 42px;

    /* Spacing */
    --kd-spacing-xs: 8px;
    --kd-spacing-sm: 12px;
    --kd-spacing-md: 20px;
    --kd-spacing-lg: 30px;
    --kd-spacing-xl: 40px;
    --kd-spacing-2xl: 60px;

    /* Border Radius */
    --kd-border-radius-sm: 4px;
    --kd-border-radius-md: 8px;
    --kd-border-radius-lg: 12px;

    /* Transitions */
    --kd-transition-fast: 0.2s ease;
    --kd-transition-normal: 0.3s ease;
    --kd-transition-slow: 0.5s ease;

    /* Shadows */
    --kd-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --kd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --kd-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --kd-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================
   RESET AND BASE STYLES
   ============================================ */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--kd-font-primary);
    color: var(--kd-text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kd-font-title);
    color: var(--kd-title-color);
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 { font-size: var(--kd-font-size-4xl); }
h2 { font-size: var(--kd-font-size-3xl); }
h3 { font-size: var(--kd-font-size-2xl); }
h4 { font-size: var(--kd-font-size-xl); }
h5 { font-size: var(--kd-font-size-lg); }
h6 { font-size: var(--kd-font-size-md); }

a {
    color: var(--kd-title-color);
    text-decoration: none;
    transition: color var(--kd-transition-fast);
}

a:hover {
    color: var(--kd-primary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
.btn {
    font-family: var(--kd-font-alternative);
    cursor: pointer;
    border: none;
    outline: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
    max-width: 1222px;
    margin: 0 auto;
    padding: 0 var(--kd-spacing-md);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--kd-spacing-xs); }
.mt-2 { margin-top: var(--kd-spacing-sm); }
.mt-3 { margin-top: var(--kd-spacing-md); }
.mt-4 { margin-top: var(--kd-spacing-lg); }
.mt-5 { margin-top: var(--kd-spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--kd-spacing-xs); }
.mb-2 { margin-bottom: var(--kd-spacing-sm); }
.mb-3 { margin-bottom: var(--kd-spacing-md); }
.mb-4 { margin-bottom: var(--kd-spacing-lg); }
.mb-5 { margin-bottom: var(--kd-spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--kd-spacing-xs); }
.pt-2 { padding-top: var(--kd-spacing-sm); }
.pt-3 { padding-top: var(--kd-spacing-md); }
.pt-4 { padding-top: var(--kd-spacing-lg); }
.pt-5 { padding-top: var(--kd-spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--kd-spacing-xs); }
.pb-2 { padding-bottom: var(--kd-spacing-sm); }
.pb-3 { padding-bottom: var(--kd-spacing-md); }
.pb-4 { padding-bottom: var(--kd-spacing-lg); }
.pb-5 { padding-bottom: var(--kd-spacing-xl); }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-start { justify-content: flex-start; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1199px) {
    :root {
        --kd-font-size-4xl: 38px;
        --kd-font-size-3xl: 28px;
        --kd-font-size-2xl: 22px;
    }
}

@media (max-width: 767px) {
    :root {
        --kd-font-size-4xl: 32px;
        --kd-font-size-3xl: 24px;
        --kd-font-size-2xl: 20px;
    }

    .container {
        padding: 0 var(--kd-spacing-sm);
    }
}