/**
 * VietMyTourist Design System
 * Based on Figma Design Tokens
 * Version: 1.0
 */

/* ============================================
   UTM FONTS - Loaded via functions.php
   ============================================ */
/* Google Fonts import removed - now using UTM Neutra and UTM Avo */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* ===== COLOR PALETTE ===== */

    /* Primary Colors - Teal */
    --color-primary-teal-dark: #037C84;
    --color-primary-teal: #64BDC3;

    /* Primary Colors - Red */
    --color-primary-red-dark: #D31725;
    --color-primary-red: #FF4A57;
    --color-primary-red-light: #FFD7D9;

    /* Neutral Colors */
    --color-neutral-900: #222222;
    --color-neutral-600: #858585;
    --color-neutral-100: #F3F4F6;
    --color-neutral-50: #EBECF0;
    --color-white: #FFFFFF;

    /* Success Colors */
    --color-success-dark: #12AF54;
    --color-success-light: #59F49A;

    /* Warning Colors */
    --color-warning-dark: #FBA504;
    --color-warning-light: #FFD381;

    /* Semantic Color Aliases */
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-background: var(--color-white);
    --color-background-light: var(--color-neutral-100);
    --color-border: #D4D4D4;

    /* ===== TYPOGRAPHY ===== */

    /* Font Families */
    --font-heading: 'UTM Neutra', sans-serif;
    --font-body: 'UTM Avo', sans-serif;
    --font-display: 'UTM Avo', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Font Sizes - Headings */
    --font-size-h1: 48px;
    --font-size-h2: 40px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 20px;

    /* Font Sizes - Body */
    --font-size-p1: 20px;
    --font-size-p2: 16px;
    --font-size-p3: 13px;

    /* Line Heights - Headings */
    --line-height-h1: 56px;
    --line-height-h2: 48px;
    --line-height-h3: 40px;
    --line-height-h4: 32px;
    --line-height-h5: 28px;
    --line-height-h6: 28px;

    /* Line Heights - Body */
    --line-height-p1: 28px;
    --line-height-p2: 24px;
    --line-height-p3: 20px;

    /* ===== SPACING ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
    --shadow-button: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */

/* Headings */
h1,
.h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    letter-spacing: 0;
}

h2,
.h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
    letter-spacing: 0;
}

h3,
.h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h3);
    letter-spacing: 0;
}

h4,
.h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h4);
    letter-spacing: 0;
}

h5,
.h5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h5);
    letter-spacing: 0;
}

h6,
.h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h6);
    letter-spacing: 0;
}

/* Body Text */
.text-p1 {
    font-family: var(--font-body);
    font-size: var(--font-size-p1);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-p1);
    letter-spacing: 0;
}

.text-p1-bold {
    font-family: var(--font-body);
    font-size: var(--font-size-p1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-p1);
    letter-spacing: 0;
}

.text-p2 {
    font-family: var(--font-body);
    font-size: var(--font-size-p2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-p2);
    letter-spacing: 0;
}

.text-p2-medium {
    font-family: var(--font-body);
    font-size: var(--font-size-p2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-p2);
    letter-spacing: 0;
}

.text-p3 {
    font-family: var(--font-body);
    font-size: var(--font-size-p3);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-p3);
    letter-spacing: 0;
}

.text-p3-bold {
    font-family: var(--font-body);
    font-size: var(--font-size-p3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-p3);
    letter-spacing: 0;
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Base Button Styles */
.vmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    height: 44px;
    border-radius: var(--radius-md);
    font-family: var(--vmt-font-heading);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    white-space: nowrap;
}

/* Button - Filled (Primary Red) */
.vmt-btn-filled {
    background-color: var(--color-primary-red-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.vmt-btn-filled:hover {
    background-color: var(--color-primary-red);
    transform: translateY(-1px);
    box-shadow: 0px 4px 8px 0px rgba(211, 23, 37, 0.3);
}

.vmt-btn-filled:active {
    transform: translateY(0);
    box-shadow: var(--shadow-button);
}

/* Button - Outline */
.vmt-btn-outline {
    background-color: var(--color-white);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-size: 16px;
}

.vmt-btn-outline:hover {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-600);
}

.vmt-btn-outline:active {
    background-color: var(--color-neutral-50);
}

/* Button - Disabled */
.vmt-btn-disabled,
.vmt-btn:disabled {
    background-color: var(--color-primary-teal-dark);
    color: var(--color-white);
    cursor: not-allowed;
    opacity: 0.6;
}

.vmt-btn-disabled:hover,
.vmt-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Button - Teal Variant */
.vmt-btn-teal {
    background-color: var(--color-primary-teal-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.vmt-btn-teal:hover {
    background-color: var(--color-primary-teal);
    transform: translateY(-1px);
    box-shadow: 0px 4px 8px 0px rgba(3, 124, 132, 0.3);
}

/* Button Icon */
.vmt-btn-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-white {
    color: var(--color-white);
}

.text-teal {
    color: var(--color-primary-teal-dark);
}

.text-red {
    color: var(--color-primary-red-dark);
}

/* Background Colors */
.bg-white {
    background-color: var(--color-white);
}

.bg-light {
    background-color: var(--color-neutral-100);
}

.bg-teal {
    background-color: var(--color-primary-teal-dark);
}

.bg-teal-light {
    background-color: var(--color-primary-teal);
}

.bg-red {
    background-color: var(--color-primary-red-dark);
}

.bg-red-light {
    background-color: var(--color-primary-red-light);
}

/* Container */
.vmt-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Spacing */
.vmt-section {
    padding: var(--spacing-3xl) 0;
}

.vmt-section-sm {
    padding: var(--spacing-2xl) 0;
}

.vmt-section-lg {
    padding: 80px 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 28px;
        --line-height-h1: 48px;
        --line-height-h2: 40px;
        --line-height-h3: 36px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --line-height-h1: 40px;
        --line-height-h2: 36px;
        --line-height-h3: 32px;
        --line-height-h4: 28px;
    }

    .vmt-container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --line-height-h1: 36px;
        --line-height-h2: 32px;
        --line-height-h3: 28px;
    }
}