/*
Theme Name: An Phát - Kim Khí & Cơ Khí
Theme URI: https://anphat.vn
Author: An Phát Technology
Author URI: https://anphat.vn
Description: Custom WordPress theme cho Công ty TNHH Sản Xuất Cơ Khí và Công Nghệ An Phát. Website B2B giới thiệu sản phẩm đồ kim khí, bu lông, ốc vít, đai ốc, vật tư cơ khí. Thiết kế hiện đại, chuẩn SEO, responsive mobile-first.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anphat
Tags: industrial, b2b, hardware, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   ============================================ */
:root {
    /* Primary Colors */
    --color-primary: #1E88E5;
    --color-primary-light: #42A5F5;
    --color-primary-dark: #1565C0;
    --color-primary-darker: #0D47A1;
    --color-primary-rgb: 30, 136, 229;

    /* Accent Colors */
    --color-accent: #FFA726;
    --color-accent-light: #FFB74D;
    --color-accent-dark: #F57C00;
    --color-accent-darker: #E65100;
    --color-accent-rgb: 255, 167, 38;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-bg-light: #F7F9FC;
    --color-bg-section: #EEF2F7;
    --color-border: #E0E6ED;
    --color-border-light: #F0F2F5;
    --color-gray-100: #F5F7FA;
    --color-gray-200: #E8ECF1;
    --color-gray-300: #D1D8E0;
    --color-gray-400: #A0AEC0;
    --color-gray-500: #718096;
    --color-gray-600: #4A5568;
    --color-gray-700: #2D3748;
    --color-text-main: #2D2D2D;
    --color-text-light: #5A6B7F;
    --color-text-muted: #8B95A5;

    /* Semantic Colors */
    --color-success: #43A047;
    --color-error: #E53935;
    --color-warning: #FB8C00;
    --color-info: #1E88E5;

    /* Typography */
    --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md: 1.125rem;    /* 18px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 1.875rem;   /* 30px */
    --fs-3xl: 2.25rem;    /* 36px */
    --fs-4xl: 3rem;       /* 48px */
    --fs-5xl: 3.75rem;    /* 60px */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.2;
    --lh-snug: 1.375;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* Spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 960px;
    --container-wide: 1440px;
    --header-height: 80px;
    --topbar-height: 40px;

    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 15px rgba(30, 136, 229, 0.35);
    --shadow-accent: 0 4px 15px rgba(255, 167, 38, 0.35);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}