/**
 * Lune Design System — Tokens
 * Single source of truth for all Lune pages.
 * Import this before any page-specific styles.
 *
 * Last updated: 2026-03-29
 */

/* ─── Primitive tokens ─────────────────────────────────────── */

:root {

  /* Color primitives */
  --lune-bg:        #0C0C12;
  --lune-surface:   #16161F;
  --lune-surface-2: #1E1E28;   /* Elevated surface — modals, popovers */
  --lune-gold:      #C4975A;
  --lune-gold-dim:  rgba(196, 151, 90, 0.10);
  --lune-gold-mid:  rgba(196, 151, 90, 0.20);
  --lune-gold-hi:   rgba(196, 151, 90, 0.40);
  --lune-teal:      #4A7B78;
  --lune-teal-dim:  rgba(74, 123, 120, 0.12);
  --lune-text:      #EDE8DC;
  --lune-muted:     #7A7468;

  /* Semantic color aliases */
  --color-bg:        var(--lune-bg);
  --color-surface:   var(--lune-surface);
  --color-accent:    var(--lune-gold);
  --color-accent-2:  var(--lune-teal);
  --color-text:      var(--lune-text);
  --color-muted:     var(--lune-muted);

  /* Text opacity scale (on dark backgrounds) */
  --text-primary:    rgba(237, 232, 220, 1.00);   /* headings, labels */
  --text-secondary:  rgba(237, 232, 220, 0.65);   /* body */
  --text-tertiary:   rgba(237, 232, 220, 0.40);   /* captions, meta */
  --text-disabled:   rgba(237, 232, 220, 0.25);

  /* Border scale */
  --border-faint:    rgba(196, 151, 90, 0.10);
  --border-subtle:   rgba(196, 151, 90, 0.18);
  --border-default:  rgba(196, 151, 90, 0.28);
  --border-strong:   rgba(196, 151, 90, 0.50);

  /* ─── Typography ──────────────────────────────────────────── */

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Type scale — 7 steps only, no in-between */
  --text-xs:   11px;   /* captions, labels, tracking tags */
  --text-sm:   16px;   /* body, card descriptions */
  --text-md:   24px;   /* subheads, card titles */
  --text-lg:   32px;   /* section headings */
  --text-xl:   48px;   /* hero sub-headlines */
  --text-2xl:  80px;   /* hero headlines (desktop) */
  --text-3xl: 120px;   /* oversized display (use sparingly) */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.20;
  --leading-normal: 1.50;
  --leading-loose:  1.70;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;  /* eyebrow labels */

  /* ─── Spacing — 8pt grid ──────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section padding */
  --section-y-desktop: 80px;
  --section-y-mobile:  48px;

  /* Container */
  --container-max: 1280px;
  --container-px:  24px;

  /* ─── Radius ──────────────────────────────────────────────── */

  --radius-xs:  4px;   /* chips, small badges */
  --radius-sm:  8px;   /* inputs, small buttons */
  --radius-md: 12px;   /* icon boxes, small cards */
  --radius-lg: 16px;   /* main cards */
  --radius-xl: 20px;   /* featured cards, hero cards */
  --radius-pill: 100px; /* pills, tags */

  /* ─── Motion ──────────────────────────────────────────────── */

  --duration-fast:    150ms;   /* hover color/border changes */
  --duration-normal:  250ms;   /* transform transitions */
  --duration-slow:    400ms;   /* page entrances, reveal animations */
  --ease-default:     cubic-bezier(0.16, 1, 0.3, 1);   /* snappy */
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Shadows ─────────────────────────────────────────────── */
  /* Zero box-shadows inside screens. Depth via color contrast only. */
  /* These are for overlay elements only (nav, tooltips, modals). */

  --shadow-nav:   0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);

}

/* ─── Base reset ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background-color: var(--lune-bg);
  color: var(--lune-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--lune-text);
}

/* ─── Utility classes ───────────────────────────────────────── */

/* Eyebrow label — used above section headings */
.lune-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--lune-gold);
}

/* Gold rule — decorative line above headings */
.lune-rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--lune-gold);
  margin-bottom: var(--space-5);
}

/* Section divider */
.lune-divider {
  border: none;
  border-top: 1px solid var(--border-faint);
}

/* ─── Component tokens ──────────────────────────────────────── */

/* Button — primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  background: var(--lune-gold);
  color: var(--lune-bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  border: none;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.btn-primary:hover  { opacity: 0.90; }
.btn-primary:active { transform: scale(0.98); }

/* Button — outline */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--lune-gold);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.btn-outline:hover {
  background: var(--lune-gold);
  color: var(--lune-bg);
}

/* Card — base */
.lune-card {
  background: var(--lune-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Card — selected state */
.lune-card-selected {
  background: var(--lune-gold-dim);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

/* Badge — style tag */
.lune-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--lune-gold-dim);
  border: 1px solid var(--border-default);
  color: var(--lune-gold);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* Input — base */
.lune-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--lune-text);
  caret-color: var(--lune-gold);
}
.lune-input::placeholder { color: var(--lune-muted); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--lune-bg); }
::-webkit-scrollbar-thumb { background: var(--lune-gold-mid); border-radius: 2px; }

/* ─── Fade-up reveal animation ──────────────────────────────── */

.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-default),
              transform var(--duration-slow) var(--ease-default);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 80ms; }
.fade-up.delay-2 { transition-delay: 160ms; }
.fade-up.delay-3 { transition-delay: 240ms; }

/* ─── Container system ─────────────────────────────────────── */
/*
 * ONE container class. Used on every page, every section.
 * Never deviate from this. No px-6 sm:px-8 lg:px-12 scattered inline.
 *
 *   <div class="lune-container"> ... </div>
 */

.lune-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 768px) {
  .lune-container { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1280px) {
  .lune-container { padding-left: 48px; padding-right: 48px; }
}

/* ─── Nav — shared across all pages ────────────────────────── */
/*
 * Floating pill. Fixed top-4. Same on every page.
 * Logo left | Links center | CTA right
 *
 * App page links: Collections / Browse stays / The weekly edit + "Find your stay"
 * Active link: text-lune-text (full opacity). Inactive: text-lune-muted.
 * Content below nav needs pt-20 to clear the fixed bar.
 *
 * HTML reference:
 *   <header class="fixed top-4 left-0 right-0 z-50 flex justify-center px-4">
 *     <nav class="lune-pill-nav"> ... </nav>
 *   </header>
 *   <main class="pt-20"> ... </main>
 */

.lune-pill-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  border-radius: 100px;
  background: rgba(12, 12, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(196, 151, 90, 0.40);
  padding: 12px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
}

.lune-nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--lune-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast);
}
.lune-nav-link:hover,
.lune-nav-link.active { color: var(--lune-text); }

.lune-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 100px;
  border: none;
  background: var(--lune-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--lune-bg);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duration-fast);
}
.lune-nav-cta:hover { opacity: 0.85; }

.lune-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 24px;
  background: rgba(12, 12, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-faint);
}

.lune-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.lune-wordmark {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--lune-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ─── Shared footer ────────────────────────────────────── */
.lune-footer {
  padding: 64px 0 48px;
  border-top: 1px solid rgba(196, 151, 90, 0.10);
}
.lune-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  .lune-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.lune-footer-heading {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lune-gold);
  margin-bottom: 20px;
}
.lune-footer-link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(237, 232, 220, 0.65);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--duration-fast);
}
.lune-footer-link:hover { color: var(--lune-text); }
.lune-footer-divider {
  padding-top: 24px;
  border-top: 1px solid rgba(196, 151, 90, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.lune-footer-small {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(237, 232, 220, 0.30);
}
.lune-footer-credit {
  color: rgba(196, 151, 90, 0.55);
}
.lune-footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(237, 232, 220, 0.60);
  line-height: 1.6;
  max-width: 28ch;
}

/* ─── Page transitions ─────────────────────────────────── */
@keyframes lune-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lune-page-enter {
  animation: lune-fade-in 0.4s ease-out both;
}

/* ─── Eyebrow (shared) ─────────────────────────────────── */
.lune-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lune-gold);
}