/* ============================================================
   NAWA RETREATS — Design System Tokens
   Sober Retreats
   Palette: Olive Black · Sage Green · Bleached Sand
   ============================================================ */

/* ---------- Fonts ------------------------------------------- */
/* Loaded here so any page that links this file gets the fonts. */
/* @import must stay the first rule in the file.                */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Josefin+Sans:wght@100;200;300;400&family=DM+Sans:wght@300;400&display=swap");

/* Wordmark — Casserole Sans (OH no Type Co.), single Regular weight */
@font-face {
  font-family: "Casserole Sans";
  src: url("fonts/CasseroleDemo-Sans.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Space Grotesk: 700 — wordmark, headlines                     */
/* Josefin Sans: 100 200 300 — subtext, labels, eyebrows        */
/* DM Sans: 300 400 — body copy, UI                             */

/* ---------- Tokens ------------------------------------------ */

:root {

  /* === BRAND PALETTE === */

  /* Core darks — olive-black base */
  --nawa-deep:       #14120A;   /* primary dark surface — hero, full-bleed */
  --nawa-forest:     #2A3018;   /* secondary dark — cards on dark, nav on scroll */
  --nawa-olive:      #3D4820;   /* mid olive — borders on dark, hover states */

  /* Sage greens — brand accent */
  --nawa-sage:       #8CA064;   /* brand primary — rings mark, buttons, links */
  --nawa-sage-deep:  #5A6E3C;   /* darker sage — small text on light backgrounds (passes WCAG AA), pressed states */
  --nawa-sage-light: #B4C890;   /* light sage — subtle highlights, icon fills */

  /* Sand scale — bleached warm neutrals */
  --nawa-sand:       #F5F0E4;   /* primary light background */
  --nawa-sand-mid:   #D4C8A8;   /* mid sand — tags, tints, light card bg */
  --nawa-sand-deep:  #B8A880;   /* deep sand — borders on light, muted tones */
  --nawa-pure:       #FDFAF4;   /* card surface on light — elevated elements */

  /* Ink scale — olive-tinted, never pure black */
  --nawa-ink:        #14120A;   /* primary text on light */
  --nawa-ink-78:     rgba(20, 18, 10, 0.78);
  --nawa-ink-60:     rgba(20, 18, 10, 0.60);
  --nawa-ink-40:     rgba(20, 18, 10, 0.40);
  --nawa-ink-20:     rgba(20, 18, 10, 0.20);
  --nawa-ink-10:     rgba(20, 18, 10, 0.10);

  /* Foreground scale — for use on dark surfaces */
  --nawa-fg:         #F5F0E4;
  --nawa-fg-70:      rgba(212, 200, 168, 0.70);
  --nawa-fg-45:      rgba(212, 200, 168, 0.45);
  --nawa-fg-20:      rgba(212, 200, 168, 0.20);
  --nawa-fg-10:      rgba(212, 200, 168, 0.10);

  /* Warm accent */
  --nawa-amber:      #C49050;   /* pricing highlights, warm emphasis */

  /* Hairlines */
  --nawa-hairline:        rgba(140, 160, 100, 0.18);
  --nawa-hairline-strong: rgba(140, 160, 100, 0.30);

  /* === TYPOGRAPHY === */

  --font-wordmark: "Casserole Sans", "Space Grotesk", sans-serif;
  --font-display:  "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-label:    "Josefin Sans", "Helvetica Neue", Arial, sans-serif;

  /* Display — wordmark, hero, section headlines */
  --type-display-weight:    700;
  --type-display-size:      clamp(36px, 5.5vw, 68px);
  --type-display-lh:        1.0;
  --type-display-tracking:  -0.04em;

  /* Title — section headings */
  --type-title-weight:      700;
  --type-title-size:        clamp(26px, 3.5vw, 44px);
  --type-title-lh:          1.08;
  --type-title-tracking:    -0.03em;

  /* Subhead — card titles, feature labels */
  --type-subhead-weight:    700;
  --type-subhead-size:      clamp(17px, 2vw, 22px);
  --type-subhead-lh:        1.3;
  --type-subhead-tracking:  -0.02em;

  /* Body */
  --type-body-weight:       300;
  --type-body-size:         17px;
  --type-body-lh:           1.8;

  /* Lead */
  --type-lead-weight:       300;
  --type-lead-size:         19px;
  --type-lead-lh:           1.85;

  /* Label / Eyebrow — section markers, tags */
  --type-label-weight:      200;
  --type-label-size:        10px;
  --type-label-tracking:    0.28em;
  --type-label-transform:   uppercase;

  /* === SPACING === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  120px;
  --space-12:  160px;

  /* === LAYOUT === */
  --nawa-content-max:    1100px;
  --nawa-content-mid:    820px;
  --nawa-content-narrow: 640px;
  --nawa-edge:           48px;
  --nawa-edge-mobile:    24px;

  /* === RADII === */
  --radius-0:    0;
  --radius-sm:   3px;
  --radius-md:   8px;
  --radius-lg:   12px;

  /* === BORDERS === */
  --border-thin:   1px;
  --border-accent: 2px;

  /* === MOTION === */
  --ease-default:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      350ms;

  /* === SHADOWS === */
  --shadow-card: 0 1px 3px rgba(20, 18, 10, 0.08), 0 4px 16px rgba(20, 18, 10, 0.05);

}

/* ---------- Element defaults -------------------------------- */

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

body.nawa {
  background: var(--nawa-sand);
  color: var(--nawa-ink);
  font-family: var(--font-body);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.nawa--dark {
  background: var(--nawa-deep);
  color: var(--nawa-fg);
}

/* ---------- Wordmark utility --------------------------------- */

.nawa-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  text-transform: lowercase;
  line-height: 1;
}

/* ---------- Semantic type utilities -------------------------- */

.nawa-display {
  font-family: var(--font-display);
  font-weight: var(--type-display-weight);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
  color: var(--nawa-ink);
  margin: 0;
}

.nawa-title {
  font-family: var(--font-display);
  font-weight: var(--type-title-weight);
  font-size: var(--type-title-size);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-tracking);
  color: var(--nawa-ink);
  margin: 0;
}

.nawa-subhead {
  font-family: var(--font-display);
  font-weight: var(--type-subhead-weight);
  font-size: var(--type-subhead-size);
  line-height: var(--type-subhead-lh);
  letter-spacing: var(--type-subhead-tracking);
  color: var(--nawa-ink);
  margin: 0;
}

.nawa-body {
  font-family: var(--font-body);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--nawa-ink-78);
  margin: 0;
}

.nawa-lead {
  font-family: var(--font-body);
  font-weight: var(--type-lead-weight);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--nawa-ink-78);
  margin: 0;
}

.nawa-label {
  font-family: var(--font-label);
  font-weight: var(--type-label-weight);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  color: var(--nawa-sage);
  margin: 0;
}

/* On dark surfaces */
.nawa-dark .nawa-display,
.nawa-dark .nawa-title,
.nawa-dark .nawa-subhead  { color: var(--nawa-fg); }
.nawa-dark .nawa-body,
.nawa-dark .nawa-lead      { color: var(--nawa-fg-70); }
.nawa-dark .nawa-label     { color: var(--nawa-sage-light); }

/* ---------- Surface utilities -------------------------------- */

.nawa-surface-dark   { background: var(--nawa-deep);   color: var(--nawa-fg); }
.nawa-surface-olive  { background: var(--nawa-forest);  color: var(--nawa-fg); }
.nawa-surface-light  { background: var(--nawa-sand);    color: var(--nawa-ink); }
.nawa-surface-card   { background: var(--nawa-pure);    color: var(--nawa-ink); }
.nawa-surface-tint   { background: var(--nawa-sand-mid); color: var(--nawa-ink); }

/* ---------- Divider ------------------------------------------ */

.nawa-rule { border: 0; border-top: 1px solid var(--nawa-ink-10); }
.nawa-rule--dark { border-top-color: var(--nawa-fg-10); }

/* ---------- Logo motion: rings gently breathe ---------------- */
/* Add class="nawa-breathe" to the rings <svg>.                  */

.nawa-breathe { animation: nawa-breathe 5s ease-in-out infinite; }

@keyframes nawa-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { .nawa-breathe { animation: none; } }
@media print { .nawa-breathe { animation: none; opacity: 1; } }