/* ============================================================
   SALAAM SUITES — design tokens
   Hospitality palette adapted from the Lumin design system
   (forest green + warm gold), recast for a light, guest-facing
   booking site. Geist is the Lumin UI face; refined serifs are
   layered per direction for editorial warmth.
   ============================================================ */

/* ---- Geist (Lumin's real UI font, self-served from Fontsource) ---- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2") format("woff2");
}

:root {
  /* ---------- BRAND GREENS (from Lumin forest, deepened for light UI) ---------- */
  --green-950: #0F1E14;
  --green-900: #14281B;
  --green-850: #19331F;   /* deep header / hero wash */
  --green-800: #1E3A28;   /* primary brand green */
  --green-700: #285039;
  --green-600: #2F5A3F;
  --green-500: #3DA14A;   /* Lumin vivid green — primary action */
  --green-400: #5FB96B;
  --green-300: #8FD49A;
  --green-100: #DDEEDF;
  --green-50:  #EEF5EE;

  /* ---------- WARM GOLD (Lumin brand accent, refined) ---------- */
  --gold-700: #9A7A22;
  --gold-600: #B8902E;
  --gold-500: #C8A24B;    /* primary gold accent */
  --gold-400: #D8B86A;
  --gold-300: #E6CE92;
  --gold-100: #F3E8CC;

  /* ---------- WARM NEUTRALS (sand / cream / ink) ---------- */
  --sand-50:  #FAF7F0;
  --sand-100: #F4EFE4;
  --sand-200: #EAE2D1;
  --sand-300: #DDD2BB;
  --sand-400: #C8B89B;
  --paper:    #FFFFFF;

  --ink-900: #161A16;     /* primary text */
  --ink-700: #313A31;
  --ink-500: #5C6A5C;     /* secondary text */
  --ink-400: #7F8B7F;     /* muted */
  --ink-300: #A7B0A6;

  /* ---------- SEMANTIC ---------- */
  --positive: #3DA14A;
  --star:     #E0A516;

  /* ---------- THEME HOOKS (overridden per direction) ---------- */
  --bg:         var(--sand-50);
  --surface:    var(--paper);
  --text:       var(--ink-900);
  --text-soft:  var(--ink-500);
  --brand:      var(--green-800);
  --accent:     var(--gold-500);
  --action:     var(--green-500);
  --hairline:   rgba(30, 58, 40, 0.12);

  /* ---------- TYPE FAMILIES ---------- */
  --font-ui:    "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-display: var(--font-ui);   /* per-theme override */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 40, 27, 0.06), 0 1px 3px rgba(20, 40, 27, 0.05);
  --shadow-md: 0 6px 18px rgba(20, 40, 27, 0.08), 0 2px 6px rgba(20, 40, 27, 0.05);
  --shadow-lg: 0 18px 48px rgba(20, 40, 27, 0.14), 0 6px 16px rgba(20, 40, 27, 0.08);
  --shadow-xl: 0 30px 80px rgba(15, 30, 20, 0.22);

  /* ---------- SPACING (4px base) ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px; --s32: 128px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* ---------- LAYOUT ---------- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}