/* =====================================================================
   Nativa Mountain Suites — Design Tokens
   Warm, editorial, photography-forward. Light theme only.
   ===================================================================== */

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

:root {
  /* ---------- COLOR · BASE PALETTE ---------- */
  --bg:             #FAFAF6;   /* page background — warm off-white */
  --bg-card:        #F0EDE6;   /* cards, sections — warm sand */
  --bg-card-2:      #E8E4DA;   /* hover state on cards */
  --bg-inset:       #F5F2EC;   /* inputs, insets */

  --fg-1:           #1C1A17;   /* primary text — volcanic basalt */
  --fg-2:           #7A7468;   /* secondary — warm gray */
  --fg-3:           #A8A295;   /* tertiary / placeholder */
  --fg-on-dark:     #FAFAF6;   /* text on dark imagery */

  --accent:         #B8885A;   /* copper / bronze — signage */
  --accent-deep:    #9C6F44;   /* hover / pressed */
  --accent-soft:    #E8DCC9;   /* tag backgrounds */

  --line:           rgba(28, 26, 23, 0.08);   /* hairline borders */
  --line-strong:    rgba(28, 26, 23, 0.12);   /* dividers */
  --scrim:          rgba(28, 26, 23, 0.55);   /* modal scrim */

  --success:        #5C7A4E;   /* sage — confirmations */
  --warning:        #B8885A;   /* uses accent copper */
  --danger:         #8B3A2E;   /* muted terracotta */

  /* ---------- TYPE · FAMILIES ---------- */
  --font-serif:     'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE · SCALE ---------- */
  --size-display:   96px;   /* hero serif */
  --size-h1:        64px;
  --size-h2:        48px;
  --size-h3:        32px;
  --size-h4:        24px;
  --size-lead:      20px;   /* larger body / lead paragraph */
  --size-body:      16px;
  --size-body-sm:   14px;
  --size-label:     12px;   /* all-caps labels */
  --size-micro:     11px;

  /* ---------- TYPE · LINE HEIGHTS ---------- */
  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-body:        1.55;
  --lh-ui:          1.3;

  /* ---------- TYPE · TRACKING ---------- */
  --track-tight:    -0.02em;   /* large serif display */
  --track-normal:   0;
  --track-label:    0.12em;    /* all-caps labels */
  --track-ui:       -0.005em;  /* Inter at body sizes */

  /* ---------- SPACING (8px grid, 4px half-step) ---------- */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  --gutter-page:    96px;      /* desktop page gutter */
  --gutter-page-sm: 24px;

  /* ---------- RADII ---------- */
  --radius-xs:      2px;    /* inputs, buttons, tags */
  --radius-sm:      4px;    /* cards, image frames */
  --radius-0:       0px;    /* full-bleed, dividers */

  /* ---------- SHADOWS ---------- */
  --shadow-none:    none;
  --shadow-raised:  0 1px 2px rgba(28, 26, 23, 0.04),
                    0 8px 24px rgba(28, 26, 23, 0.06);
  --shadow-modal:   0 4px 12px rgba(28, 26, 23, 0.08),
                    0 32px 64px rgba(28, 26, 23, 0.14);

  /* ---------- MOTION ---------- */
  --ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:       200ms;
  --dur-base:       400ms;
  --dur-slow:       700ms;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:     62ch;
  --maxw-editorial: 48ch;
  --maxw-page:      1440px;
}

/* =====================================================================
   SEMANTIC — drop-in tag styles
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); line-height: var(--lh-display); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); font-weight: 500; }

.display {
  font-family: var(--font-serif);
  font-size: var(--size-display);
  font-weight: 300;
  font-style: italic;
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
}

p {
  max-width: var(--maxw-prose);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--fg-1);
  max-width: var(--maxw-editorial);
}

.muted { color: var(--fg-2); }
.accent { color: var(--accent); }

/* Editorial all-caps label */
.eyebrow,
.label {
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}

/* Thin decorative rule (often sits between eyebrow and heading) */
.rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--line-strong);
  vertical-align: middle;
  margin: 0 var(--sp-3);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); }

/* Focus — copper ring, no browser default */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: var(--sp-7) 0;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}