/*
Theme Name: Kreevo
Theme URI: https://kreevo.agency/theme
Author: Kreevo Agency
Author URI: https://kreevo.agency
Description: Premium WooCommerce theme with RTL/Arabic support, Elementor integration, and AJAX-powered shopping experience. Built for MENA e-commerce businesses.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kreevo
Domain Path: /languages
Tags: e-commerce, woocommerce, rtl-language-support, arabic, elementor, ajax, custom-colors, custom-fonts, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, left-sidebar, right-sidebar, threaded-comments, translation-ready, two-columns, three-columns, four-columns, flexible-header, accessibility-ready

Kreevo WooCommerce Theme, Copyright 2024 Kreevo Agency
Kreevo is distributed under the terms of the GNU GPL
*/

/* === KREEVO DESIGN TOKENS === */
:root {
  /* Brand Colors */
  --kreevo-lime: #c6ff00;
  --kreevo-lime-dark: #a8d900;
  --kreevo-lime-light: #d8ff4d;
  --kreevo-black: #080808;
  --kreevo-black-2: #0f0f0f;
  --kreevo-black-3: #161616;
  --kreevo-border: #1c1c1c;
  --kreevo-text: #e8e8e8;
  --kreevo-text-muted: #888888;
  --kreevo-white: #ffffff;

  /* Functional Colors */
  --kreevo-success: #00d68f;
  --kreevo-warning: #ffb347;
  --kreevo-error: #ff4757;
  --kreevo-info: #54a0ff;

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-arabic: 'Cairo', sans-serif;

  /* Spacing */
  --kreevo-gap-xs: 8px;
  --kreevo-gap-sm: 16px;
  --kreevo-gap-md: 24px;
  --kreevo-gap-lg: 48px;
  --kreevo-gap-xl: 80px;
  --kreevo-gap-2xl: 120px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-lime: 0 0 30px rgba(198,255,0,0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Container */
  --container-max: 1400px;
  --container-padding: 24px;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* === RESET & BASE === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kreevo-text);
  background-color: var(--kreevo-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL Support */
body.rtl,
html[dir="rtl"] body {
  font-family: var(--font-arabic);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--kreevo-lime); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kreevo-white);
}

.rtl h1, .rtl h2, .rtl h3,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: var(--font-arabic);
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* === LAYOUT === */
.kreevo-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.kreevo-section {
  padding: var(--kreevo-gap-xl) 0;
}

.kreevo-grid {
  display: grid;
  gap: var(--kreevo-gap-md);
}

.kreevo-flex {
  display: flex;
  gap: var(--kreevo-gap-md);
}

/* === BUTTONS === */
.kreevo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.kreevo-btn-primary {
  background: var(--kreevo-lime);
  color: var(--kreevo-black);
}

.kreevo-btn-primary:hover {
  background: var(--kreevo-lime-light);
  color: var(--kreevo-black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lime);
}

.kreevo-btn-outline {
  border: 1px solid var(--kreevo-border);
  color: var(--kreevo-text);
}

.kreevo-btn-outline:hover {
  border-color: var(--kreevo-lime);
  color: var(--kreevo-lime);
}

.kreevo-btn-ghost {
  color: var(--kreevo-text-muted);
  padding: 10px 0;
}

.kreevo-btn-ghost:hover { color: var(--kreevo-lime); }

/* === BADGES & LABELS === */
.kreevo-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.kreevo-badge-lime {
  background: rgba(198,255,0,0.15);
  color: var(--kreevo-lime);
  border: 1px solid rgba(198,255,0,0.3);
}

/* === FORMS === */
.kreevo-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--kreevo-black-2);
  border: 1px solid var(--kreevo-border);
  border-radius: var(--radius-md);
  color: var(--kreevo-text);
  font-size: 15px;
  transition: border-color var(--transition-fast);
}

.kreevo-input:focus {
  outline: none;
  border-color: var(--kreevo-lime);
}

.kreevo-input::placeholder { color: var(--kreevo-text-muted); }

/* === CARDS === */
.kreevo-card {
  background: var(--kreevo-black-2);
  border: 1px solid var(--kreevo-border);
  border-radius: var(--kreevo-gap-sm);
  overflow: hidden;
  transition: all var(--transition-base);
}

.kreevo-card:hover {
  border-color: rgba(198,255,0,0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* === ACCESSIBILITY === */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 6px;
  padding: 8px 16px;
  background: var(--kreevo-lime);
  color: var(--kreevo-black);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: 0; }

/* === UTILITIES === */
.kreevo-text-lime { color: var(--kreevo-lime); }
.kreevo-text-muted { color: var(--kreevo-text-muted); }
.kreevo-text-white { color: var(--kreevo-white); }
.kreevo-bg-black-2 { background: var(--kreevo-black-2); }
.kreevo-bg-black-3 { background: var(--kreevo-black-3); }

.kreevo-hidden { display: none !important; }
.kreevo-sr-only { @extend .screen-reader-text; }

/* === LOADER === */
.kreevo-loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--kreevo-border);
  border-top-color: var(--kreevo-lime);
  border-radius: 50%;
  animation: kreevo-spin 0.6s linear infinite;
}

@keyframes kreevo-spin {
  to { transform: rotate(360deg); }
}

/* === WOOCOMMERCE OVERRIDES (base) === */
.woocommerce-store-notice { background: var(--kreevo-lime) !important; color: var(--kreevo-black) !important; }
.woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { border-top-color: var(--kreevo-lime) !important; background: var(--kreevo-black-2) !important; color: var(--kreevo-text) !important; }
.woocommerce .woocommerce-error::before { color: var(--kreevo-error) !important; }
.woocommerce .woocommerce-info::before { color: var(--kreevo-info) !important; }
.woocommerce .woocommerce-message::before { color: var(--kreevo-success) !important; }
.woocommerce a.button, .woocommerce button.button { background: var(--kreevo-lime) !important; color: var(--kreevo-black) !important; border-radius: var(--radius-full) !important; font-weight: 600 !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--kreevo-lime-light) !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--kreevo-lime) !important; color: var(--kreevo-black) !important; }

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 1200px) {
  :root { --container-padding: 32px; }
}
@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --kreevo-gap-xl: 60px;
    --kreevo-gap-2xl: 80px;
  }
}
@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
    --kreevo-gap-xl: 48px;
  }
}