/* ----------------------------------------------------------------------------
   Design tokens — Taj Aravali Resort & Spa wayfinding
   Sibling of the Taj Lands End signage system: cream paper, warm-charcoal
   ink, TrajanPro display, Poppins body, Outfit labels.
   ----------------------------------------------------------------------------*/

@font-face {
  font-family: 'TrajanPro';
  src: url('../assets/fonts/TrajanPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --color-bg:           #FFFEF4;
  --color-bg-warm:      #F4ECDC;
  --color-bg-deep:      #E9DEC4;
  --color-surface:      #FFFFFF;
  --color-surface-soft: #FBF6EA;
  --color-ink:          #45443F;
  --color-ink-soft:     #6E5D46;
  --color-ink-faint:    rgba(69, 68, 63, 0.55);
  --color-line:         rgba(69, 68, 63, 0.14);
  --color-line-strong:  rgba(69, 68, 63, 0.32);

  --color-brand:        #1E3A52;
  --color-brand-gold:   #B89149;

  /* Category colours — mirror poi_data.json `categories[].color` so the
   * map dots and tiles harmonise with the printed legend. */
  --cat-dining:         #C19A4B;
  --cat-meetings:       #7A6A4F;
  --cat-restaurant:     #B5651D;
  --cat-inhouse:        #5C7A3A;
  --cat-sightseeing:    #3F6F8F;
  --cat-phone:          #666666;
  --cat-yourehere:      #6F4E7C;
  --cat-fire:           #14817C;
  --cat-rooms:          #8B6F3C;
  --cat-wellness:       #9C7BB0;
  --cat-adventure:      #D08A3C;

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-serif: 'TrajanPro', 'Cormorant Garamond', 'Playfair Display',
                 Georgia, 'Times New Roman', serif;
  --font-sans:  'Poppins', 'Inter', 'Manrope', system-ui, -apple-system,
                 'Segoe UI', Roboto, sans-serif;
  --font-label: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

  --fs-display: 64px;
  --fs-h1:      44px;
  --fs-h2:      30px;
  --fs-body:    22px;
  --fs-ui:      22px;
  --fs-small:   18px;

  --lh-tight:   1.15;
  --lh-body:    1.5;

  --ls-display: 0.18em;
  --ls-eyebrow: 0.36em;
  --ls-ui:      0.04em;

  /* ── Spacing scale ─────────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 9999px;

  /* ── Elevation (kept gentle — heavy shadows tax Chrome 114) ───── */
  --shadow-1: 0 2px 4px rgba(42, 33, 24, 0.06);
  --shadow-2: 0 6px 14px rgba(42, 33, 24, 0.10);
  --shadow-3: 0 14px 28px rgba(42, 33, 24, 0.16);

  /* ── Motion — slow, premium, but always ≤ 320ms ────────────────── */
  --t-fast:   180ms;
  --t-base:   260ms;
  --t-slow:   320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.65, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout — design target 1080 × 1920 portrait (scales to UHD) ──
   * 3-row grid: header / map / categories. No search bar — the kiosk
   * is browse-by-category-or-pin only, per the WA65F reach-zone rule. */
  --h-header:    110px;
  --h-footer:    140px;          /* breathing room below the tile grid */

  /* ── Touch ────────────────────────────────────────────────────── */
  --tap-min:   72px;
  --tap-lg:    96px;

  /* Nav-circle gutter width — reserved on detail view so the side-mounted
   * Home / Back buttons never overlap text or images. */
  --nav-gutter: 130px;
}

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Activated by html[data-theme="dark"]. JS picks the theme on boot from
   localStorage → time-of-day fallback. Manual button toggles + persists.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --color-bg:           #14181E;   /* deep navy-black paper */
  --color-bg-warm:      #1E232B;
  --color-bg-deep:      #0E1116;
  --color-surface:      #232830;
  --color-surface-soft: #2A2F38;
  --color-ink:          #E8E0D0;   /* warm cream text */
  --color-ink-soft:     #BEB6A4;
  --color-ink-faint:    rgba(232, 224, 208, 0.55);
  --color-line:         rgba(232, 224, 208, 0.12);
  --color-line-strong:  rgba(232, 224, 208, 0.30);

  /* On dark backgrounds the navy disappears — shift the brand colour
   * toward warm gold so headings stay readable. */
  --color-brand:        #C9A867;
  --color-brand-gold:   #D9B868;

  /* Category colours: keep most as-is (they're already mid-saturation),
   * but lift the darker ones so they don't muddy on dark surfaces. */
  --cat-meetings:       #9A8866;
  --cat-phone:          #9A988F;
  --cat-rooms:          #B79159;
  --cat-sightseeing:    #5E97B7;

  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.36);
  --shadow-2: 0 6px 14px rgba(0, 0, 0, 0.46);
  --shadow-3: 0 14px 28px rgba(0, 0, 0, 0.55);
}