/* ============================================================
   Hotel Sonar Bangla, Puri — Design Tokens
   Coastal luxury: warm paper, deep ocean, sunset brass.
   ============================================================ */

:root {
  /* Color — core */
  --color-ink: #14282e;          /* deep sea-slate: headings, body */
  --color-ink-soft: #40565d;     /* secondary text */
  --color-paper: #faf7f1;        /* warm paper background */
  --color-paper-raised: #fffdf9; /* cards on paper */
  --color-sand: #ece2cf;         /* sand surface */
  --color-sand-deep: #ddcfb4;
  --color-ocean: #17565f;        /* brand teal — primary actions */
  --color-ocean-deep: #0d3a41;
  --color-ocean-wash: #e3eeed;   /* pale teal wash */
  --color-accent: #c2872f;       /* sunset brass — highlights, links hover */
  --color-accent-soft: #f3e6cf;
  --color-line: #d8cfc0;         /* hairlines on paper */
  --color-line-dark: #2a4249;    /* hairlines on ink */
  --color-error: #a33a2a;
  --color-ok: #2e6b46;

  /* Color — semantic aliases */
  --color-bg: var(--color-paper);
  --color-fg: var(--color-ink);
  --color-fg-muted: var(--color-ink-soft);
  --color-surface: var(--color-paper-raised);
  --color-cta: var(--color-ocean);
  --color-cta-hover: var(--color-ocean-deep);
  --color-on-cta: #f8f5ee;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --text-2xs: 0.72rem;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.7rem;
  --text-2xl: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  --text-3xl: clamp(2.3rem, 1.4rem + 3.4vw, 3.4rem);
  --text-hero: clamp(2.6rem, 1.6rem + 5vw, 4.6rem);
  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --tracking-label: 0.18em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.25rem;
  --space-8: 4.75rem;
  --space-9: 7rem;

  /* Radius — restrained, editorial */
  --radius-small: 4px;
  --radius-medium: 10px;
  --radius-pill: 999px;

  /* Elevation — soft, minimal */
  --shadow-soft: 0 1px 2px rgb(20 40 46 / 0.05), 0 8px 24px rgb(20 40 46 / 0.07);
  --shadow-lift: 0 2px 4px rgb(20 40 46 / 0.06), 0 18px 44px rgb(20 40 46 / 0.12);

  /* Layout */
  --container-max: 76rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --header-h: 4.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;

  /* Media */
  --media-gradient: linear-gradient(160deg, #dce8e6 0%, #ece2cf 55%, #ddcfb4 100%);

  /* Z-index */
  --z-nav: 50;
  --z-drawer: 60;
  --z-lightbox: 80;

  /* Height reserved at the bottom of the viewport for the sticky mobile
     booking bar. The bar is fixed, so without this reservation it covers the
     last thing on the page — on the landing page it sat on top of the hero's
     own booking buttons. Zero from 56em, where layout.css hides the bar, so
     the reservation costs desktop nothing. */
  --book-bar-h: 4.25rem;
}

@media (min-width: 56em) {
  :root { --book-bar-h: 0rem; }
}