/* ============================================================
   THE AZURE CURATOR — Design System
   Alanya Tur · Premium Travel Platform
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS — Mediterranean Palette
   ============================================================ */
:root {
  /* Primary — Deep Azure Sea */
  --color-primary:              #0a3d5c;
  --color-primary-light:        #1a6491;
  --color-primary-dark:         #062a3f;
  --color-primary-container:    #d0e8f5;
  --color-on-primary:           #ffffff;

  /* Secondary — Amber Sun (Conversion Engine) */
  --color-secondary:            #fe9800;
  --color-secondary-light:      #ffb340;
  --color-secondary-dark:       #cc7a00;
  --color-secondary-container:  #fff3dc;
  --color-on-secondary:         #1a0e00;

  /* Tertiary — Sand & Stone */
  --color-tertiary:             #c4a882;
  --color-tertiary-light:       #d9c4a3;
  --color-tertiary-dark:        #9e8060;

  /* Surface Layers — Tonal Depth */
  --surface-lowest:             #f0f4f8;
  --surface-low:                #e6ecf2;
  --surface:                    #f8fafc;
  --surface-container:          #edf2f7;
  --surface-container-high:     #e2eaf1;
  --surface-container-highest:  #d8e4ed;

  /* Neutrals */
  --color-outline:              #b0c4d4;
  --color-outline-variant:      #d4e2ec;

  /* Text */
  --text-primary:               #0d2336;
  --text-secondary:             #3a5a73;
  --text-tertiary:              #6b8fa8;
  --text-on-dark:               #ffffff;
  --text-on-dark-secondary:     rgba(255, 255, 255, 0.75);

  /* Status */
  --color-success:              #1a7a4a;
  --color-warning:              #fe9800;
  --color-error:                #c62d2d;

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

  /* Display — Cormorant Garamond */
  --font-display:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Inter', system-ui, -apple-system, sans-serif;

  /* Size Scale */
  --text-display-2xl:   clamp(3rem, 7vw, 5.5rem);
  --text-display-xl:    clamp(2.5rem, 5.5vw, 4.25rem);
  --text-display-lg:    clamp(2rem, 4vw, 3.25rem);
  --text-display-md:    clamp(1.75rem, 3.2vw, 2.625rem);
  --text-display-sm:    clamp(1.5rem, 2.5vw, 2rem);
  --text-heading-xl:    1.5rem;
  --text-heading-lg:    1.25rem;
  --text-heading-md:    1.125rem;
  --text-heading-sm:    1rem;
  --text-body-xl:       1.125rem;
  --text-body-lg:       1rem;
  --text-body-md:       0.9375rem;
  --text-body-sm:       0.875rem;
  --text-label-lg:      0.875rem;
  --text-label-md:      0.8125rem;
  --text-label-sm:      0.75rem;

  /* Line Heights */
  --leading-display:    1.1;
  --leading-heading:    1.3;
  --leading-body:       1.65;
  --leading-label:      1.4;

  /* Letter Spacing */
  --tracking-display:   -0.02em;
  --tracking-heading:   -0.01em;
  --tracking-label:     0.04em;
  --tracking-caps:      0.1em;

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

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ============================================================
     ELEVATION & SHADOWS
     ============================================================ */
  --shadow-xs:      0 1px 2px rgba(10, 61, 92, 0.06);
  --shadow-sm:      0 2px 8px rgba(10, 61, 92, 0.08);
  --shadow-md:      0 4px 20px rgba(10, 61, 92, 0.10);
  --shadow-lg:      0 8px 40px rgba(10, 61, 92, 0.12);
  --shadow-xl:      0 16px 60px rgba(10, 61, 92, 0.15);
  --shadow-2xl:     0 32px 80px rgba(10, 61, 92, 0.20);

  /* Conversion Elevation — booking widgets sit closer */
  --shadow-booking: 0 8px 48px rgba(10, 61, 92, 0.18), 0 2px 8px rgba(10, 61, 92, 0.10);

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:    0.375rem;
  --radius-md:    0.75rem;
  --radius-lg:    1.25rem;
  --radius-xl:    1.75rem;
  --radius-2xl:   2.5rem;
  --radius-full:  9999px;

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-floating:  100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;
  --z-sticky:    500;

  /* ============================================================
     GLASSMORPHISM
     ============================================================ */
  --glass-bg:           rgba(10, 35, 54, 0.72);
  --glass-bg-light:     rgba(248, 250, 252, 0.88);
  --glass-border:       rgba(255, 255, 255, 0.12);
  --glass-blur:         saturate(180%) blur(20px);
  --glass-blur-heavy:   saturate(200%) blur(32px);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.display-2xl {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
}
.display-sm {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
}
.heading-xl { font-size: var(--text-heading-xl); font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.heading-lg { font-size: var(--text-heading-lg); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.heading-md { font-size: var(--text-heading-md); font-weight: var(--weight-medium); line-height: var(--leading-heading); }
.body-xl    { font-size: var(--text-body-xl); line-height: var(--leading-body); }
.body-lg    { font-size: var(--text-body-lg); line-height: var(--leading-body); }
.body-md    { font-size: var(--text-body-md); line-height: var(--leading-body); }
.body-sm    { font-size: var(--text-body-sm); line-height: var(--leading-body); }
.label-lg   { font-size: var(--text-label-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
.label-md   { font-size: var(--text-label-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
.label-sm   { font-size: var(--text-label-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* Color utilities */
.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-accent     { color: var(--color-secondary); }
.text-on-dark    { color: var(--text-on-dark); }

/* Surface utilities */
.surface           { background-color: var(--surface); }
.surface-container { background-color: var(--surface-container); }
.surface-highest   { background-color: var(--surface-container-highest); }

/* ============================================================
   SCROLL ANIMATIONS — Fade In on Scroll
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up-delay-1 { transition-delay: 100ms; }
.fade-up-delay-2 { transition-delay: 200ms; }
.fade-up-delay-3 { transition-delay: 300ms; }
.fade-up-delay-4 { transition-delay: 400ms; }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-container) 25%,
    var(--surface-container-high) 50%,
    var(--surface-container) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   GLOBAL NAV HEIGHT
   ============================================================ */
:root { --nav-height: 68px; }

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-4);
}
.category-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-6) var(--space-4);
  background: #fff; border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl); text-decoration: none;
  color: var(--text-primary); transition: all .25s;
  box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-secondary); }
.category-card:hover .category-arrow { opacity: 1; transform: translateX(0); }
.category-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.category-title { font-size: .875rem; font-weight: 600; margin-bottom: var(--space-1); }
.category-desc  { font-size: .75rem; color: var(--text-secondary); line-height: 1.4; }
.category-arrow { position: absolute; bottom: .75rem; right: .75rem; opacity: 0; transform: translateX(-4px); transition: all .2s; font-size: .85rem; color: var(--color-secondary); }

/* ============================================================
   HOTELS GRID (new)
   ============================================================ */
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1100px) {
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .hotels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .hotels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
}