/* ==========================================================================
   Finca Escondida — design system: colour, type and layout tokens

   Single source of truth, shared by the marketing site (sites/marketing,
   which receives a copy in vendor/ via scripts/sync-design.mjs) and the club
   application (apps/book). Do not edit the vendored copy.
   ========================================================================== */

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

:root {
  /* Core palette */
  --forest:        #0E2A1C;  /* primary ink / dark ground        */
  --forest-deep:   #0A2016;  /* footer ground                    */
  --forest-tint:   #14311F;  /* image placeholder on dark        */
  --paper:         #F3F0E6;  /* page ground                      */
  --paper-warm:    #F7F5EC;  /* headline white / raised ground   */
  --sand:          #E9E5D6;  /* destination + signup ground      */
  --shell:         #EFECE3;  /* booking ground, white cards on it */
  --gold:          #D9C48A;  /* accent — CTAs, kickers           */
  --terracotta:    #B4622F;  /* accent — rules, peak hours       */
  --terracotta-text: #9A4F22; /* terracotta for text: 5.2:1 on paper, 4.7:1 on sand */
  --plum:          #26102B;  /* dining band (Lotus & Lime)       */

  /* Supporting text */
  --olive:         #6F6039;  /* kicker on paper (5.4:1)          */
  --moss:          #3C5044;  /* body text on paper               */
  --moss-mute:     #5A6A5E;  /* labels on paper (5.0:1, 4.6 on sand) */
  --ink-soft:      #24352B;  /* column headers                   */
  --sage:          #A9BFAF;  /* labels on forest                 */
  --cream:         #E6E1D2;  /* nav / body on forest             */
  --cream-cool:    #E3E9E1;
  --cream-warm:    #DCE4DB;
  --cream-dim:     #C9D6C8;  /* package bullets                  */
  --footer-link:   #C4D2C5;
  --stone:         #DCD8C8;  /* image placeholder on paper       */

  /* Dining band tints */
  --rose-kicker:   #E7C8DE;
  --rose-body:     #F1E4EC;
  --rose-label:    #E0BDD5;

  /* Availability dots */
  /* Status colours — separate from the gold/terracotta accents so "almost
     full" never reads as a link and "filling up" never reads as a button.
     Each is ≥3:1 on white, shell and sand (WCAG 1.4.11). */
  --status-open:   #2F7D4F;
  --status-mid:    #A8721A;
  --status-low:    #A8352B;
  --dot-open:      var(--status-open);
  --dot-mid:       var(--status-mid);
  --dot-low:       var(--status-low);

  /* Rules & washes over forest ink */
  --rule-ink-08:   rgba(14, 42, 28, 0.09);
  --rule-ink-12:   rgba(14, 42, 28, 0.12);
  --rule-ink-16:   rgba(14, 42, 28, 0.16);
  --rule-ink-20:   rgba(14, 42, 28, 0.20);
  --rule-ink-22:   rgba(14, 42, 28, 0.22);
  --rule-ink-28:   rgba(14, 42, 28, 0.28);
  --rule-ink-30:   rgba(14, 42, 28, 0.30);
  --rule-ink-32:   rgba(14, 42, 28, 0.32);
  --rule-ink-35:   rgba(14, 42, 28, 0.35);
  --rule-ink-55:   rgba(14, 42, 28, 0.55);  /* borders that must read (inputs, chips, open slots): ≥3:1 on sand, shell and white */

  /* Rules & washes over paper */
  --rule-paper-12: rgba(243, 240, 230, 0.12);
  --rule-paper-14: rgba(243, 240, 230, 0.14);
  --rule-paper-18: rgba(243, 240, 230, 0.18);
  --rule-paper-20: rgba(243, 240, 230, 0.20);
  --rule-paper-22: rgba(243, 240, 230, 0.22);
  --rule-paper-30: rgba(243, 240, 230, 0.30);
  --rule-paper-35: rgba(243, 240, 230, 0.35);
  --rule-paper-40: rgba(243, 240, 230, 0.40);
  --rule-paper-50: rgba(243, 240, 230, 0.50);

  /* Type */
  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans:  "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale — multiples of 4px. New rules take from here; the v2
     design values are being rounded onto it as sections are revisited. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --maxw:   1440px;
  --gutter: 28px;
}