/* ============================================================================
   Bjarmi — design tokens. Grounded in the Emstra Design System
   (warm-stone neutrals, coastal teal, gold) with harmonised warm-sand
   tones for the light/airy tourism mood.
   ============================================================================ */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Variable.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Exo"; src: url("../fonts/Exo-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  /* brand teals (from Emstra DS) */
  --emstra-teal:        #62C1BF;
  --emstra-teal-light:  #8DD8D6;
  --tool-teal:          #0d9488;
  --tool-teal-hover:    #0f766e;
  --navy:               #192A3D;
  --cta:                #F97316;
  --cta-hover:          #EA580C;
  --gold:               #F7C948;

  /* warm-stone neutrals */
  --warm-white:    #fafaf9;
  --warm-surface:  #f5f5f4;
  --warm-border:   #e7e5e4;
  --warm-border-2: #d6d3d1;
  --ink:           #1c1917;
  --ink-2:         #57534e;
  --ink-3:         #a8a29e;

  /* warm-sand harmonised tones (oklch) */
  --sand-50:   oklch(0.975 0.012 78);
  --sand-100:  oklch(0.955 0.018 76);
  --sand-200:  oklch(0.915 0.026 74);
  --sand-300:  oklch(0.86 0.034 72);
  --clay:      oklch(0.62 0.07 56);

  /* teal tint for amenities band */
  --teal-50:   #ecf8f6;

  /* warm dark (cinematic) */
  --wd-bg:        #1C1917;
  --wd-surface:   #292524;
  --wd-elevated:  #44403C;
  --wd-text:      #FAFAF9;
  --wd-text-2:    #A8A29E;
  --wd-text-3:    #78716C;

  /* deep dusk navy for hero sky */
  --dusk-1: #14202e;
  --dusk-2: #1c3344;
  --dusk-3: #2d5566;

  /* type stacks */
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--sys);
  --font-body:    "Inter", var(--sys);
  --font-serif:   "Source Serif 4", Georgia, serif;
  --font-exo:     "Exo", var(--sys);

  /* radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* elevation */
  --shadow-subtle:   0 2px 8px rgba(28,25,23,0.05);
  --shadow-medium:   0 8px 24px rgba(28,25,23,0.07);
  --shadow-elevated: 0 18px 48px rgba(28,25,23,0.10);
  --shadow-soft:     0 30px 80px rgba(28,25,23,0.12);

  /* motion */
  --ease-enter:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-inout:    cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms; --t-fast: 200ms; --t-base: 320ms; --t-reveal: 700ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* shared reveal — content is VISIBLE by default; JS "arms" (hides) only
   below-the-fold elements, then reveals them on scroll. */
.reveal { transition: opacity var(--t-reveal) var(--ease-dramatic), transform var(--t-reveal) var(--ease-dramatic); will-change: opacity, transform; }
.reveal.armed { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.armed { opacity: 1 !important; transform: none !important; }
}