/**
 * PONNUSAMY HOTEL - CSS VARIABLES
 * Modern fluid scaling architecture for all screen sizes
 * From 4" mobile to 32" 4K and Ultrawide displays
 */

:root {
    /* ===== FLUID TYPOGRAPHY SCALE ===== */
    /* Using clamp() for smooth scaling between breakpoints */

    /* Base font size: 14px on mobile, 16px on tablet, 18px on desktop, 20px on 4K */
    --font-size-base: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);

    /* Heading scales */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1.125rem);
    --font-size-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
    --font-size-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
    --font-size-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
    --font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
    --font-size-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);
    --font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 6rem);

    /* Line heights - increase on larger screens for readability */
    --line-height-tight: clamp(1.25, 1.2 + 0.25vw, 1.375);
    --line-height-normal: clamp(1.5, 1.4 + 0.5vw, 1.625);
    --line-height-relaxed: clamp(1.625, 1.5 + 0.625vw, 1.75);
    --line-height-loose: clamp(1.75, 1.6 + 0.75vw, 2);

    /* Letter spacing - slightly wider on ultrawide for readability */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: clamp(0.025em, 0.02em + 0.005vw, 0.05em);
    --letter-spacing-wider: clamp(0.05em, 0.04em + 0.01vw, 0.1em);
    --letter-spacing-widest: clamp(0.1em, 0.08em + 0.02vw, 0.15em);

    /* ===== FLUID SPACING SCALE ===== */
    /* Padding and margins that scale smoothly */

    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);
    --space-4xl: clamp(6rem, 4rem + 10vw, 12rem);

    /* Section spacing */
    --section-padding-block: clamp(3rem, 2rem + 5vw, 8rem);
    --section-padding-inline: clamp(1rem, 0.5rem + 2.5vw, 4rem);

    /* ===== CONTAINER WIDTHS ===== */
    /* Max-width containers for content readability */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-3xl: 1800px;   /* For ultrawide */
    --container-4xl: 2500px;   /* For ultra-ultrawide */

    /* Adaptive container with fluid max-width */
    --container-fluid: clamp(320px, 90vw, var(--container-3xl));

    /* ===== GRID COLUMNS ===== */
    /* Responsive grid system */

    --grid-columns-mobile: 1;
    --grid-columns-tablet: 2;
    --grid-columns-laptop: 3;
    --grid-columns-desktop: 4;
    --grid-columns-ultrawide: 5;

    /* Fluid gap sizes */
    --gap-xs: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    --gap-sm: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --gap-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --gap-lg: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --gap-xl: clamp(3rem, 2rem + 5vw, 6rem);

    /* ===== BORDER RADIUS ===== */

    --radius-sm: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --radius-md: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --radius-lg: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --radius-xl: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --radius-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --radius-full: 9999px;

    /* ===== COLORS ===== */

    /* Primary brand colors */
    --color-primary: #fb923c;
    --color-primary-dark: #ea580c;
    --color-primary-light: #fed7aa;

    /* Gold/Beige palette */
    --color-gold: #fbbf24;
    --color-gold-dark: #d97706;
    --color-gold-light: #fef3c7;
    --color-beige: #f5f5dc;
    --color-beige-dark: #e8e8d0;
    --color-beige-light: #fafaf5;

    /* Neutral colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Slate colors for dark backgrounds */
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* Semantic colors */
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;
    --color-text-inverse: #ffffff;

    --color-bg-primary: var(--color-beige);
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: var(--color-gray-50);
    --color-bg-dark: var(--color-slate-900);

    /* ===== SHADOWS ===== */
    /* Scaled shadows for depth perception */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ===== TRANSITIONS ===== */

    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ===== Z-INDEX SCALE ===== */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;

    /* ===== INTERACTIVE ELEMENT SIZES ===== */
    /* Minimum hit-box sizes for accessibility */

    --hit-box-sm: clamp(36px, 3rem + 1vw, 44px);
    --hit-box-md: clamp(44px, 3.5rem + 1vw, 56px);
    --hit-box-lg: clamp(56px, 4rem + 1.5vw, 72px);

    /* Button padding */
    --btn-padding-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem) clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --btn-padding-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem) clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --btn-padding-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem) clamp(2rem, 1.6rem + 2vw, 3rem);
}

/* ===== ULTRAWIDE SPECIFIC ADJUSTMENTS ===== */
@media (min-aspect-ratio: 21/9) {
    :root {
        /* Increase horizontal spacing on ultrawide */
        --section-padding-inline: clamp(2rem, 1rem + 5vw, 8rem);

        /* Wider letter spacing for readability */
        --letter-spacing-normal: 0.01em;
        --letter-spacing-wide: 0.075em;

        /* Increase line height */
        --line-height-normal: 1.7;
        --line-height-relaxed: 1.8;

        /* Larger gaps between grid items */
        --gap-md: clamp(2rem, 1.5rem + 2.5vw, 4rem);
        --gap-lg: clamp(3rem, 2rem + 5vw, 6rem);
    }
}

/* ===== 4K AND HIGH DPI DISPLAYS ===== */
@media (min-width: 2560px) {
    :root {
        /* Increase base font size significantly */
        --font-size-base: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);

        /* Larger spacing for comfort */
        --space-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
        --space-lg: clamp(2.5rem, 2rem + 2.5vw, 4rem);
        --space-xl: clamp(4rem, 3rem + 5vw, 6rem);

        /* Larger interactive elements */
        --hit-box-md: clamp(56px, 4rem + 1.5vw, 72px);
        --hit-box-lg: clamp(72px, 5rem + 2vw, 96px);
    }
}

/* ===== TABLET SPECIFIC (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --grid-columns-default: var(--grid-columns-tablet);
        --section-padding-inline: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    }
}

/* ===== MOBILE SPECIFIC (up to 767px) ===== */
@media (max-width: 767px) {
    :root {
        --grid-columns-default: var(--grid-columns-mobile);
        --section-padding-inline: clamp(1rem, 0.5rem + 2.5vw, 1.5rem);

        /* Tighter spacing on mobile */
        --space-xl: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
        --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);

        /* Smaller gaps */
        --gap-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
        --gap-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 768px) and (orientation: landscape) {
    :root {
        /* Reduce vertical spacing in landscape */
        --section-padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
        --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    }
}