/**
 * VHP Design Tokens
 * =================
 * Centralized design tokens (CSS custom properties) for the VHP booking engine.
 * Inspired by Booking.com's visual language.
 *
 * Usage: var(--vhp-blue-600)
 * Load order: AFTER global.css, BEFORE page-specific CSS.
 *
 * @version 1.0.0
 * @date    2026-03-01
 */

/* ========================================================================
   1. COLOR TOKENS
   ======================================================================== */

:root {
    /* ---- Primary Blue (Booking.com core) ---- */
    --vhp-blue-900: #003580;
    --vhp-blue-800: #00487a;
    --vhp-blue-700: #0057b8;
    --vhp-blue-600: #0071c2;    /* Primary CTA */
    --vhp-blue-500: #0a84ff;
    --vhp-blue-100: #cce3f5;
    --vhp-blue-50:  #ebf3ff;

    /* ---- Green (Success / Inclusions) ---- */
    --vhp-green-700: #008009;
    --vhp-green-600: #0e8a16;
    --vhp-green-100: #c8e6c9;
    --vhp-green-50:  #e8f5e9;

    /* ---- Red (Errors / Urgency) ---- */
    --vhp-red-700:  #cc0000;
    --vhp-red-600:  #d9534f;
    --vhp-red-100:  #fecaca;
    --vhp-red-50:   #fef2f2;

    /* ---- Orange (Warnings / Badges) ---- */
    --vhp-orange-700: #e4752b;
    --vhp-orange-600: #ff8d00;
    --vhp-orange-100: #ffe0b2;
    --vhp-orange-50:  #fff8e1;

    /* ---- Yellow (Highlights) ---- */
    --vhp-yellow-600: #ffc107;
    --vhp-yellow-100: #fff9c4;
    --vhp-yellow-50:  #fffde7;

    /* ---- Neutral Gray ---- */
    --vhp-gray-900: #1a1a2e;    /* Primary text */
    --vhp-gray-800: #333333;    /* Dark text (legacy #333) */
    --vhp-gray-700: #474747;    /* Secondary text */
    --vhp-gray-600: #555454;    /* Headings (legacy match) */
    --vhp-gray-500: #6b6b6b;    /* Muted text / captions */
    --vhp-gray-400: #8c8c8c;
    --vhp-gray-300: #d6d6d6;    /* Borders */
    --vhp-gray-200: #e0e0e0;    /* Subtle borders */
    --vhp-gray-100: #f5f5f5;    /* Surface / background */
    --vhp-gray-50:  #fafafa;    /* Lightest surface */

    /* ---- Absolute ---- */
    --vhp-white: #ffffff;
    --vhp-black: #1a1a1a;

    /* ---- Semantic Aliases ---- */
    --vhp-color-primary:      var(--vhp-blue-600);
    --vhp-color-primary-dark: var(--vhp-blue-900);
    --vhp-color-primary-hover:var(--vhp-blue-700);
    --vhp-color-success:      var(--vhp-green-700);
    --vhp-color-danger:       var(--vhp-red-700);
    --vhp-color-warning:      var(--vhp-orange-600);
    --vhp-color-info:         var(--vhp-blue-600);

    --vhp-color-text:         var(--vhp-gray-900);
    --vhp-color-text-secondary: var(--vhp-gray-700);
    --vhp-color-text-muted:   var(--vhp-gray-500);
    --vhp-color-link:         var(--vhp-blue-600);
    --vhp-color-link-hover:   var(--vhp-blue-700);

    --vhp-color-border:       var(--vhp-gray-300);
    --vhp-color-border-light: var(--vhp-gray-200);
    --vhp-color-border-soft:  #dbe4ef;
    --vhp-color-border-emphasis: #d9e4f0;
    --vhp-color-border-form-strong: #cfd9e5;
    --vhp-color-surface:      var(--vhp-gray-100);
    --vhp-color-surface-light:var(--vhp-gray-50);
    --vhp-color-background:   var(--vhp-white);

    /* ---- Page-specific ---- */
    --vhp-header-bg:          #252525;
    --vhp-footer-bg:          #252525;


    /* ====================================================================
       2. TYPOGRAPHY TOKENS
       ==================================================================== */

    --vhp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vhp-font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* Font Sizes — modular scale */
    --vhp-font-2xs:  11px;
    --vhp-font-xs:   12px;
    --vhp-font-sm:   13px;
    --vhp-font-base: 14px;
    --vhp-font-md:   16px;
    --vhp-font-lg:   18px;
    --vhp-font-xl:   20px;
    --vhp-font-2xl:  24px;
    --vhp-font-3xl:  32px;

    /* Font Weights */
    --vhp-weight-light:    300;
    --vhp-weight-normal:   400;
    --vhp-weight-medium:   500;
    --vhp-weight-semibold: 600;
    --vhp-weight-bold:     700;

    /* Line Heights */
    --vhp-leading-none:    1;
    --vhp-leading-tight:   1.25;
    --vhp-leading-snug:    1.375;
    --vhp-leading-normal:  1.5;
    --vhp-leading-relaxed: 1.625;
    --vhp-leading-loose:   1.75;

    /* Semantic typography roles */
    --vhp-type-overline-size:      var(--vhp-font-xs);
    --vhp-type-overline-weight:    var(--vhp-weight-semibold);
    --vhp-type-overline-leading:   var(--vhp-leading-tight);

    --vhp-type-caption-size:       var(--vhp-font-xs);
    --vhp-type-caption-weight:     var(--vhp-weight-normal);
    --vhp-type-caption-leading:    var(--vhp-leading-normal);

    --vhp-type-meta-size:          var(--vhp-font-sm);
    --vhp-type-meta-weight:        var(--vhp-weight-medium);
    --vhp-type-meta-leading:       var(--vhp-leading-normal);

    --vhp-type-body-size:          var(--vhp-font-base);
    --vhp-type-body-weight:        var(--vhp-weight-normal);
    --vhp-type-body-leading:       var(--vhp-leading-relaxed);

    --vhp-type-body-strong-size:   var(--vhp-font-base);
    --vhp-type-body-strong-weight: var(--vhp-weight-semibold);
    --vhp-type-body-strong-leading:var(--vhp-leading-normal);

    --vhp-type-action-size:        var(--vhp-font-base);
    --vhp-type-action-weight:      var(--vhp-weight-semibold);
    --vhp-type-action-leading:     var(--vhp-leading-tight);

    --vhp-type-card-title-size:    var(--vhp-font-lg);
    --vhp-type-card-title-size-sm: 17px;
    --vhp-type-card-title-size-lg: 22px;
    --vhp-type-card-title-weight:  var(--vhp-weight-bold);
    --vhp-type-card-title-leading: var(--vhp-leading-snug);

    --vhp-type-section-title-size: var(--vhp-font-xl);
    --vhp-type-section-title-size-sm: var(--vhp-font-lg);
    --vhp-type-section-title-size-lg: 22px;
    --vhp-type-section-title-weight: var(--vhp-weight-bold);
    --vhp-type-section-title-leading: var(--vhp-leading-snug);

    --vhp-type-page-title-size:    var(--vhp-font-2xl);
    --vhp-type-page-title-weight:  var(--vhp-weight-bold);
    --vhp-type-page-title-leading: var(--vhp-leading-snug);

    --vhp-type-page-display-size:  36px;
    --vhp-type-page-display-size-md: 30px;
    --vhp-type-page-display-size-sm: 28px;
    --vhp-type-page-display-weight: var(--vhp-weight-bold);
    --vhp-type-page-display-leading: 1.15;

    --vhp-type-helper-size:        var(--vhp-font-sm);
    --vhp-type-helper-weight:      var(--vhp-weight-medium);
    --vhp-type-helper-leading:     var(--vhp-leading-normal);

    --vhp-type-status-badge-size:  var(--vhp-font-xs);
    --vhp-type-status-badge-weight: 800;
    --vhp-type-status-badge-leading: var(--vhp-leading-tight);

    --vhp-type-summary-label-size: var(--vhp-font-base);
    --vhp-type-summary-label-weight: var(--vhp-weight-normal);
    --vhp-type-summary-label-leading: var(--vhp-leading-normal);

    --vhp-type-summary-value-size: var(--vhp-font-md);
    --vhp-type-summary-value-weight: var(--vhp-weight-semibold);
    --vhp-type-summary-value-leading: var(--vhp-leading-normal);

    --vhp-type-room-title-size:    30px;
    --vhp-type-room-title-size-md: 24px;
    --vhp-type-room-title-size-sm: 22px;
    --vhp-type-room-title-weight:  var(--vhp-weight-bold);
    --vhp-type-room-title-leading: 1.2;

    --vhp-type-room-body-size:     var(--vhp-font-base);
    --vhp-type-room-body-weight:   var(--vhp-weight-normal);
    --vhp-type-room-body-leading:  1.55;

    --vhp-type-room-price-size:    40px;
    --vhp-type-room-price-size-lg: 44px;
    --vhp-type-room-price-size-md: 34px;
    --vhp-type-room-price-size-sm: 36px;
    --vhp-type-room-price-weight:  var(--vhp-weight-bold);
    --vhp-type-room-price-leading: 1.02;

    --vhp-type-rate-title-size:    17px;
    --vhp-type-rate-title-size-sm: 16px;
    --vhp-type-rate-title-weight:  var(--vhp-weight-semibold);
    --vhp-type-rate-title-leading: 1.35;

    --vhp-type-rate-copy-size:     var(--vhp-font-sm);
    --vhp-type-rate-copy-leading:  1.45;

    --vhp-type-rate-price-size:    24px;
    --vhp-type-rate-price-size-md: 22px;
    --vhp-type-rate-price-size-sm: 20px;
    --vhp-type-rate-price-weight:  var(--vhp-weight-bold);
    --vhp-type-rate-price-leading: var(--vhp-leading-tight);

    --vhp-type-price-note-size:    var(--vhp-font-sm);
    --vhp-type-price-note-leading: 1.4;

    --vhp-type-price-label-size:   var(--vhp-font-xs);
    --vhp-type-price-label-weight: var(--vhp-weight-medium);
    --vhp-type-price-label-leading: 1.4;

    --vhp-type-empty-state-title-size: 28px;
    --vhp-type-empty-state-title-leading: 1.3;
    --vhp-type-empty-state-body-size: 15px;
    --vhp-type-empty-state-body-leading: 1.55;

    --vhp-type-price-md-size:      var(--vhp-font-xl);
    --vhp-type-price-md-weight:    var(--vhp-weight-bold);
    --vhp-type-price-md-leading:   var(--vhp-leading-tight);

    --vhp-type-price-lg-size:      28px;
    --vhp-type-price-lg-weight:    var(--vhp-weight-bold);
    --vhp-type-price-lg-leading:   var(--vhp-leading-tight);

    --vhp-type-price-xl-size:      36px;
    --vhp-type-price-xl-weight:    var(--vhp-weight-bold);
    --vhp-type-price-xl-leading:   var(--vhp-leading-none);


    /* ====================================================================
       3. SPACING TOKENS (4px base grid)
       ==================================================================== */

    --vhp-space-0:   0;
    --vhp-space-px:  1px;
    --vhp-space-0-5: 2px;
    --vhp-space-1:   4px;
    --vhp-space-1-5: 6px;
    --vhp-space-2:   8px;
    --vhp-space-2-5: 10px;
    --vhp-space-3:   12px;
    --vhp-space-3-5: 14px;
    --vhp-space-4:   16px;
    --vhp-space-4-5: 18px;
    --vhp-space-5:   20px;
    --vhp-space-5-5: 22px;
    --vhp-space-6:   24px;
    --vhp-space-7:   28px;
    --vhp-space-8:   32px;
    --vhp-space-10:  40px;
    --vhp-space-12:  48px;
    --vhp-space-16:  64px;
    --vhp-space-20:  80px;


    /* ====================================================================
       4. BORDER RADIUS TOKENS
       ==================================================================== */

    --vhp-radius-none: 0;
    --vhp-radius-xs:   2px;
    --vhp-radius-sm:   4px;
    --vhp-radius-md:   8px;
    --vhp-radius-lg:   12px;
    --vhp-radius-xl:   16px;
    --vhp-radius-full: 9999px;

    --vhp-surface-card-radius-md:  var(--vhp-radius-lg);
    --vhp-surface-card-radius-lg:  14px;
    --vhp-surface-control-radius:  10px;
    --vhp-surface-card-border-soft: var(--vhp-color-border-soft);
    --vhp-surface-card-border-strong: var(--vhp-color-border-emphasis);


    /* ====================================================================
       5. SHADOW TOKENS (elevation system)
       ==================================================================== */

    --vhp-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
    --vhp-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --vhp-shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --vhp-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --vhp-shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --vhp-shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.25);
    --vhp-shadow-inner:   inset 0 2px 4px rgba(0, 0, 0, 0.06);

    --vhp-surface-card-shadow-default: var(--vhp-shadow-xs);
    --vhp-surface-card-shadow-prominent: var(--vhp-shadow-md);

    /* ====================================================================
       5A. LAYOUT TOKENS
       ==================================================================== */

    --vhp-surface-card-padding-sm: 16px;
    --vhp-surface-card-padding-md: 20px;
    --vhp-surface-card-padding-lg: 24px;

    --vhp-layout-page-section-gap: 32px;
    --vhp-layout-card-stack-gap:   20px;
    --vhp-layout-search-block-padding: 20px;
    --vhp-layout-search-block-padding-sm: 16px;
    --vhp-layout-room-card-media-width: 220px;
    --vhp-layout-room-card-price-width: 220px;
    --vhp-layout-empty-state-min-height: 320px;
    --vhp-layout-empty-state-min-height-lg: 360px;
    --vhp-layout-empty-state-min-height-sm: 240px;

    /* Focus ring */
    --vhp-ring-width:  2px;
    --vhp-ring-color:  rgba(0, 113, 194, 0.4);
    --vhp-ring-offset: 2px;


    /* ====================================================================
       6. Z-INDEX TOKENS (managed stack)
       ==================================================================== */

    --vhp-z-behind:     -1;
    --vhp-z-base:        0;
    --vhp-z-dropdown:    1000;
    --vhp-z-sticky:      2000;
    --vhp-z-header:      3000;
    --vhp-z-overlay:     50000;
    --vhp-z-modal:       99999;
    --vhp-z-modal-content: 100000;
    --vhp-z-modal-close: 100001;
    --vhp-z-toast:       105000;
    --vhp-z-datepicker:  111111;
    --vhp-z-max:         999999;


    /* ====================================================================
       7. MOTION / TRANSITION TOKENS
       ==================================================================== */

    --vhp-duration-instant:  0ms;
    --vhp-duration-fast:     100ms;
    --vhp-duration-normal:   200ms;
    --vhp-duration-moderate: 300ms;
    --vhp-duration-slow:     400ms;
    --vhp-duration-slower:   600ms;

    --vhp-ease-default:   cubic-bezier(0.4, 0, 0.2, 1);   /* ease-in-out (Material) */
    --vhp-ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --vhp-ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --vhp-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);


    /* ====================================================================
       8. BREAKPOINT REFERENCE (for documentation — can't use in @media)
       Bootstrap 3 breakpoints maintained for compat:
       xs: 0       (phone)
       sm: 768px   (tablet)
       md: 992px   (desktop)
       lg: 1200px  (large desktop)
       ==================================================================== */

    --vhp-breakpoint-sm: 768px;
    --vhp-breakpoint-md: 992px;
    --vhp-breakpoint-lg: 1200px;


    /* ====================================================================
       9. CONTAINER / LAYOUT TOKENS
       ==================================================================== */

    --vhp-container-sm:      750px;
    --vhp-container-md:      970px;
    --vhp-container-lg:      1170px;
    --vhp-gutter:            30px;
    --vhp-gutter-half:       15px;
}

@media (min-width: 768px) {
    :root {
        --vhp-type-body-size:          var(--vhp-font-md);
        --vhp-type-body-strong-size:   var(--vhp-font-md);
        --vhp-type-card-title-size:    var(--vhp-font-xl);
        --vhp-type-section-title-size: 26px;
        --vhp-type-page-title-size:    32px;
        --vhp-type-price-md-size:      22px;
        --vhp-type-price-lg-size:      32px;
        --vhp-type-price-xl-size:      42px;
    }
}

@media (min-width: 992px) {
    :root {
        --vhp-type-card-title-size:    22px;
        --vhp-type-section-title-size: 28px;
        --vhp-type-page-title-size:    36px;
        --vhp-type-price-md-size:      24px;
        --vhp-type-price-lg-size:      36px;
        --vhp-type-price-xl-size:      46px;
    }
}

@media (min-width: 1440px) {
    :root {
        --vhp-type-page-title-size:    40px;
        --vhp-type-section-title-size: 30px;
        --vhp-type-price-lg-size:      40px;
        --vhp-type-price-xl-size:      52px;
    }
}


/* ========================================================================
   10. REDUCED MOTION PREFERENCE
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --vhp-duration-instant:  0ms;
        --vhp-duration-fast:     0ms;
        --vhp-duration-normal:   0ms;
        --vhp-duration-moderate: 0ms;
        --vhp-duration-slow:     0ms;
        --vhp-duration-slower:   0ms;
    }
}


/* ========================================================================
   11. DARK MODE PREPARATION (optional, future-proofing)
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --vhp-color-text:          #e4e4e4;
        --vhp-color-text-secondary:#b0b0b0;
        --vhp-color-text-muted:    #8c8c8c;
        --vhp-color-background:    #1a1a2e;
        --vhp-color-surface:       #2d2d2d;
        --vhp-color-surface-light: #3a3a3a;
        --vhp-color-border:        #444;
        --vhp-color-border-light:  #3a3a3a;
    }
}
*/

/* ========================================================================
   12. BASE FONT APPLICATION
   Override legacy Oxygen/Arial with Inter across all elements.
   Must load AFTER global.css to win specificity.
   ======================================================================== */

body,
body *:not(.icon):not(.icon-*):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not(.material-icons-outlined) {
    font-family: var(--vhp-font-family);
}

body {
    font-size: var(--vhp-font-base);
    line-height: var(--vhp-leading-normal);
    color: var(--vhp-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Preserve icon fonts */
.icon,
[class^="icon-"],
[class*=" icon-"],
.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "FontAwesome" !important;
}

.material-icons-outlined {
    font-family: "Material Icons Outlined" !important;
}