/*
Theme Name: Karofi Water & Appliance Theme Framework
Theme URI: https://example.com/karofi-theme
Author: AI Antigravity Team
Author URI: https://example.com
Description: Giao diện WordPress cao cấp chuyên biệt dành cho thương hiệu máy lọc nước, máy làm mát, thiết bị gia dụng thông minh chuẩn phong cách Karofi. Lập trình độc lập 100%, chuẩn SEO và tối ưu trải nghiệm người dùng.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, water-purifier, appliances, karofi-style, custom-colors, featured-images, translation-ready
Text Domain: karofi-theme
*/

/* ==========================================================================
   KAROFI DESIGN SYSTEM - CSS VARIABLES (Mã nguồn độc lập mới 100%)
   ========================================================================== */
:root {
  /* Tú Phong Home Services & Karofi Brand Colors (Matching Logo Palette) */
  --kr-primary: #005bb5;        /* Blue from Logo T & Text */
  --kr-primary-dark: #00438c;
  --kr-primary-light: #eaf3fd;
  --kr-green: #1ea342;          /* Green from Logo P */
  --kr-green-dark: #157a30;
  --kr-green-light: #e9f7ec;
  --kr-navy: #092c54;           /* Deep Navy from Logo */
  --kr-navy-dark: #051a33;
  --kr-accent: #1ea342;         /* Vibrant Green Accent */
  --kr-accent-hover: #157a30;
  --kr-yellow: #ffde18;
  --kr-success: #1ea342;
  --kr-warning: #f59e0b;

  /* Neutrals & Surfaces */
  --kr-bg-main: #ffffff;
  --kr-bg-gray: #F2F2F2;
  --kr-bg-soft: #f4f8fc;
  --kr-text-dark: #111827;
  --kr-text-main: #1f2937;
  --kr-text-muted: #4b5563;
  --kr-text-light: #9ca3af;
  --kr-border: #e5e7eb;
  --kr-border-gray: #dddddd;

  /* Typography */
  --kr-font-family: 'Arial', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kr-font-heading: 'Arial', var(--kr-font-family);

  /* Signature Karofi Geometry */
  --kr-radius-card: 24px;
  --kr-radius-pill: 32px;
  --kr-radius-md: 16px;
  --kr-radius-sm: 8px;

  /* Shadows */
  --kr-shadow-sm: 0 2px 8px rgba(0, 91, 181, 0.05);
  --kr-shadow-card: 0 4px 20px rgba(0, 91, 181, 0.08);
  --kr-shadow-hover: 0 12px 30px rgba(0, 91, 181, 0.2);

  /* Transitions */
  --kr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Global Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--kr-font-family);
  background-color: var(--kr-bg-main);
  color: var(--kr-text-main);
  line-height: 1.6;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kr-font-heading);
  color: var(--kr-text-dark);
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: var(--kr-text-dark);
  text-decoration: none;
  transition: var(--kr-transition);
}

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

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