/* ==========================================================================
   MAIN.CSS — Design Tokens, Reset, Base Typography, Utilities
   Plaza Hotel
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg: #FAFAF8;
  --color-white: #FFFFFF;
  --color-surface: #F5F3EF;
  --color-border: #E8E4DC;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6560;
  --color-accent: #8B6914;
  --color-accent-dark: #6B5010;
  --color-accent-light: #C9A84C;
  --color-dark: #0F0E0C;

  /* Status Colors */
  --color-success: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-error: #C62828;
  --color-error-bg: #FFEBEE;
  --color-warning: #E65100;
  --color-warning-bg: #FFF3E0;
  --color-info: #0277BD;
  --color-info-bg: #E1F5FE;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Font sizes */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 4rem;

  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 1.75;

  /* 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;

  /* Border radius */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 32px 60px rgba(0, 0, 0, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-lightbox: 9999;
}

/* --------------------------------------------------------------------------
   2. CSS Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --------------------------------------------------------------------------
   3. Base Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 4vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.5rem, 3vw, var(--fs-4xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--fs-3xl)); }
h4 { font-size: clamp(1.125rem, 2vw, var(--fs-2xl)); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p {
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

p + p {
  margin-top: var(--space-4);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   4. Focus-Visible Styles (Accessibility)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   5. Custom Scrollbar (WebKit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   6. Utility Classes — Text Alignment
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   7. Utility Classes — Margin Top
   -------------------------------------------------------------------------- */
.mt-1 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-8); }
.mt-3 { margin-top: var(--space-12); }
.mt-4 { margin-top: var(--space-16); }
.mt-5 { margin-top: var(--space-20); }

/* --------------------------------------------------------------------------
   8. Utility Classes — Margin Bottom
   -------------------------------------------------------------------------- */
.mb-1 { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-8); }
.mb-3 { margin-bottom: var(--space-12); }
.mb-4 { margin-bottom: var(--space-16); }
.mb-5 { margin-bottom: var(--space-20); }

/* --------------------------------------------------------------------------
   9. Utility Classes — Padding Y (vertical)
   -------------------------------------------------------------------------- */
.py-1 { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.py-2 { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.py-3 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-4 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-5 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

/* --------------------------------------------------------------------------
   10. Utility Classes — Padding X (horizontal)
   -------------------------------------------------------------------------- */
.px-1 { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-2 { padding-left: var(--space-8);  padding-right: var(--space-8); }
.px-3 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-4 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-5 { padding-left: var(--space-20); padding-right: var(--space-20); }

/* --------------------------------------------------------------------------
   11. Utility Classes — Display
   -------------------------------------------------------------------------- */
.d-flex  { display: flex; }
.d-grid  { display: grid; }
.d-none  { display: none; }
.hidden  { visibility: hidden; }
.w-100   { width: 100%; }

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   12. Selection styles
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-dark);
}