/* Altura Event — Brand Tokens (matched to altura.rs)
   ----------------------------------------------------------------
   Light warm off-white background, near-black ink, soft mustard-gold
   accent. Serif display + clean sans body. Pill-shaped CTAs.
*/

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

:root {
  /* — Brand palette (matched to altura.rs) ———————————————————— */
  --altura-bg:          #F5F2ED;  /* page bg — warm light cream */
  --altura-bg-2:        #EDE9E2;  /* subtle surface */
  --altura-cream:       #FAF8F4;  /* card surfaces */
  --altura-bone:        #E5E0D6;  /* dividers / chips */

  --altura-ink:         #0E0E0E;  /* near-black headings + buttons */
  --altura-ink-2:       #1F1F1F;  /* body strong */
  --altura-graphite:    #4A4A4A;  /* body */
  --altura-stone:       #8A8479;  /* muted */
  --altura-mist:        #B8B2A6;  /* placeholders */

  --altura-gold:        #C9A04E;  /* primary accent — mustard gold */
  --altura-gold-2:      #B68B3A;  /* gold pressed */
  --altura-gold-soft:   #E8D5A0;  /* gold tint */

  /* — Semantic ———————————————————— */
  --bg:                 var(--altura-bg);
  --surface:            var(--altura-cream);
  --surface-2:          var(--altura-bone);
  --text:               var(--altura-ink);
  --text-muted:         var(--altura-stone);
  --text-body:          var(--altura-graphite);
  --primary:            var(--altura-ink);     /* buttons are dark */
  --primary-hover:      #2A2A2A;
  --accent:             var(--altura-gold);
  --border:             #D9D3C5;
  --border-strong:      #B8B2A6;

  /* — Type ———————————————————— */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-sans:    'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* — Spacing ———————————————————— */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* — Radii ———————————————————— */
  --r-xs: 2px; --r-sm: 6px; --r-md: 12px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* — Shadows ———————————————————— */
  --shadow-1: 0 1px 2px rgba(20, 18, 14, 0.05);
  --shadow-2: 0 4px 12px rgba(20, 18, 14, 0.08);
  --shadow-3: 0 12px 32px rgba(20, 18, 14, 0.10);
  --shadow-4: 0 24px 64px rgba(20, 18, 14, 0.14);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms;
}

.altura {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.altura h1, .altura h2, .altura h3, .altura .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}