/* Brand tokens, source: your_bali_connection_brandbook.pdf page 2 (authoritative palette).
   Contrast measured 2026-08-31. On Sand surfaces text is Charcoal or Deep Green, nothing lighter.

   Layer 1 is the brand and does not change. Layer 2 gives every surface, line, radius, shadow and
   motion a name, so a component says what it is instead of repeating a hex. That is also what a
   dark theme would need: it would redefine layer 2 only and never touch a brand value. */
:root{
  /* Layer 1: brand */
  --green-900:#1F4D3A;   /* logo, nav, headlines, primary CTA */
  --green-700:#4F724D;   /* secondary green text on cream, large-only on sand */
  --sage-500:#7CA57A;    /* decorative only, fails as text */
  --sand-100:#E8D9C5;    /* cards, calm section backgrounds */
  --cream-50:#F6F1E7;    /* page ground */
  --terra-500:#E07A5F;   /* decorative only */
  --terra-700:#CE4B28;   /* CTA with white label; on cream large text only */
  --teal-600:#2F7775;    /* links and quiet accents, large-only on sand */
  --ink-900:#26332E;     /* body text (Charcoal) */
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Layer 2: surfaces and lines */
  --ground:var(--cream-50);
  --surface:#fff;
  --surface-sunken:#FBF8F2;
  --surface-accent:var(--sand-100);
  --line:#EDE7DA;
  --line-strong:#D8CFBD;
  --text:var(--ink-900);
  --text-muted:var(--green-700);

  /* Radii. One scale, so nothing is 13px because it felt right that afternoon. */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-pill:999px;

  /* Elevation. Two layers each: a tight contact shadow plus a wide soft one. A single blur is
     what makes a card look printed on rather than lying on. */
  --shadow-1:0 1px 2px rgba(38,51,46,.05), 0 2px 10px rgba(38,51,46,.05);
  --shadow-2:0 2px 4px rgba(38,51,46,.06), 0 10px 26px rgba(38,51,46,.09);
  --shadow-3:0 4px 8px rgba(38,51,46,.08), 0 22px 48px rgba(38,51,46,.14);

  /* Motion. Short and eased out: an interface that decelerates reads as responsive, one that
     runs linearly reads as slow even at the same duration. */
  --dur-fast:120ms;
  --dur:200ms;
  --ease:cubic-bezier(.22,.7,.3,1);

  --focus:0 0 0 3px rgba(124,165,122,.55);
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur:0ms}
}