/*
Theme Name: Vtipz Theme
Theme URI: https://vtipz.com.vn
Author: Vtipz Dev Team
Author URI: https://vtipz.com.vn
Description: Giao diện chính thức website Vtipz.com.vn - Phân phối hóa mỹ phẩm và chất tẩy rửa gia đình. Thiết kế chuẩn theo Figma UI Design Desktop (Node 174:2).
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: vtipz-theme
Tags: e-commerce, wholesale, grid-layout, responsive-layout, custom-menu
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS FROM FIGMA NODE 174:2)
   ========================================================================== */
:root {
    /* Brand Colors - Standard SYSTEM_RULES & Figma Tokens */
    --color-primary: #0E4E85;
    --color-primary-dark: #093760;
    --color-blue: #1C75BC;
    --color-accent: #F26B21;
    --color-accent-hover: #D85611;
    --color-gold: #F5BD06;
    --color-dark-navy: #123A63;
    
    /* Semantic Aliases */
    --vtipz-primary: var(--color-primary);
    --vtipz-primary-dark: var(--color-primary-dark);
    --vtipz-primary-light: var(--color-blue);
    --vtipz-accent: var(--color-accent);
    --vtipz-accent-hover: var(--color-accent-hover);
    --vtipz-gold: var(--color-gold);

    /* Background Colors */
    --color-bg-light: #F4F8FC;
    --color-bg-white: #FFFFFF;
    --vtipz-bg-light: #F4F8FC;
    --vtipz-bg-soft: #E8F2FB;
    --vtipz-bg-soft-blue: #CFE3F6;
    --vtipz-bg-card: #FFFFFF;
    --vtipz-bg-dark: #0E4E85;

    /* Text Colors */
    --color-text-dark: #101820;
    --color-text-heading: #1E293B;
    --color-text-body: #334155;
    --color-text-muted: #64748B;
    --color-text-white: #FFFFFF;

    --vtipz-text-dark: #101820;
    --vtipz-text-heading: #1E293B;
    --vtipz-text-body: #334155;
    --vtipz-text-muted: #64748B;
    --vtipz-text-white: #FFFFFF;

    /* Status Colors */
    --color-success: #009444;
    --color-warning: #FFB800;
    --color-danger: #E02B2B;

    --vtipz-success: #009444;
    --vtipz-warning: #FFB800;
    --vtipz-danger: #E02B2B;

    /* Borders & Shadows */
    --color-border: #D8DFE7;
    --color-border-light: #CFE3F6;
    --color-border-search: #BBD6EE;

    --vtipz-border: #D8DFE7;
    --vtipz-border-light: #CFE3F6;
    --vtipz-border-search: #BBD6EE;

    --vtipz-shadow-sm: 0 2px 6px rgba(14, 78, 133, 0.04);
    --vtipz-shadow-md: 0 6px 18px rgba(14, 78, 133, 0.08);
    --vtipz-shadow-lg: 0 12px 32px rgba(14, 78, 133, 0.12);

    /* Asymmetric Border Radii Tokens from Figma Spec */
    --radius-hero: 0 0 140px 0;
    --radius-about: 0 0 120px 0;
    --radius-cta: 0 0 100px 0;
    --radius-cta-media: 100px 0 0 0;
    --radius-sub-1: 0 0 80px 0;
    --radius-sub-2: 80px 0 0 0;
    --radius-single-main: 0 0 80px 0;
    --radius-promo: 0 0 64px 0;
    --radius-gallery: 0 0 48px 0;
    --radius-card: 0 0 40px 0;
    --radius-thumb: 0 0 20px 0;
    --radius-search: 0 0 24px 0;
    --radius-agency-btn: 0 0 18px 0;
    --radius-btn: 0 0 16px 0;
    --radius-btn-sm: 0 0 14px 0;
    --radius-badge: 0 0 10px 0;
    --radius-circle: 50%;

    /* Typography */
    --font-primary: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --vtipz-font: var(--font-primary);

    /* Spacing & Layout */
    --vtipz-container: 1320px;
    --vtipz-section-pad: 48px 0;
}