/* =============================================================================
   Visit Citrusdal — palette system
   -----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for colour. JS reads these variables at runtime rather
   than hard-coding hex, so the wordmark recolours itself to whatever section it
   sits in. Do not duplicate these values in components.

   Valley Combo is the site-wide brand palette and lives on :root.
   Section palettes are opt-in:

       <section data-palette="citrus-grove"> ... </section>

   Everything inside inherits that section's colours automatically.

   Colours were sampled BY EYE from local brand logos (Mouton Citrus, Carmién
   Rooibos, The Cederberg Circle, Kardoesie Padstal) — see reference-map.md.
   They are approximations. Get official values before print or co-branded use.
   ============================================================================= */

/* Figtree = the Telos design-system brand face (for the "developed by telos" credit). */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;700&display=swap');

/* Shared footer bits: a clean meta row + the Telos-branded credit (dark footers). */
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:12px 26px;
  flex-wrap:wrap;margin-top:18px;}
.foot-meta > p{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.5);margin:0;max-width:60ch;}
.telos-by{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.45);
  white-space:nowrap;}
.telos-wm{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-family:'Figtree',ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:14.5px;color:rgba(255,255,255,.9);transition:color .25s;}
.telos-wm .tmark{width:15px;height:15px;flex:0 0 auto;}
.telos-wm:hover{color:#fff;}

:root {
  /* ---- Type tokens ---------------------------------------------------------
     Headings = Bricolage Grotesque (characterful, warm); body/UI = General Sans.
     The LOGO stays Fredoka (the SVG wordmark's S glyph + the "VISIT" label) —
     never swap --font-logo, it keeps the custom wordmark coherent. -------- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'General Sans', system-ui, sans-serif;
  --font-logo:    'Fredoka', system-ui, sans-serif;

  /* ---- Valley Combo — primary brand palette -------------------------------
     One colour from each local brand, so no single business's identity
     dominates the town's. -------------------------------------------------- */
  --vermilion: #F95B33;   /* Mouton Citrus   */
  --green:     #0DB14B;   /* Mouton Citrus   */
  --red:       #D81E27;   /* Carmién Rooibos */
  --navy:      #16204A;   /* Kardoesie       */
  --mustard:   #E0CA6C;   /* Cederberg Circle*/
  --cream:     #FFF7EF;

  /* semantic tokens — components should use THESE, not the raw names above */
  --ground:     #FFF7EF;
  --ground-alt: #FDEBDA;
  --text:       #16204A;
  --text-soft:  #5A6070;
  --accent:     #F95B33;
  --accent-2:   #0DB14B;
  --accent-3:   #E0CA6C;
  --dark:       #16204A;   /* reversed / hero background */
  --on-dark:    #FFF7EF;
  --on-accent:  #FFFFFF;

  /* wordmark, letter by letter: C I T R U S  D A L */
  --wm-1: #F95B33; --wm-2: #16204A; --wm-3: #0DB14B;
  --wm-4: #D81E27; --wm-5: #16204A; --wm-6: #F95B33;
  --wm-7: #0DB14B; --wm-8: #D81E27; --wm-9: #F95B33;

  /* wordmark reversed out of --dark */
  --wm-rev-1: #F95B33; --wm-rev-2: #FFFFFF; --wm-rev-3: #5FD07F;
  --wm-rev-4: #E0CA6C; --wm-rev-5: #FFFFFF; --wm-rev-6: #F95B33;
  --wm-rev-7: #5FD07F; --wm-rev-8: #E0CA6C; --wm-rev-9: #F95B33;
}

/* ---- Citrus Grove — Mouton-led ---------------------------------------------
   Bright, playful, most literally "citrus". Good for family / kids / farm
   content. Reads as a fruit brand, so avoid using it site-wide. ------------- */
[data-palette="citrus-grove"] {
  --ground:     #FFF7EF;
  --ground-alt: #FFEDE4;
  --text:       #414141;
  --text-soft:  #6E6E6E;
  --accent:     #F95B33;
  --accent-2:   #0DB14B;
  --accent-3:   #16204A;
  --dark:       #16204A;
  --on-dark:    #FFF7EF;
  --on-accent:  #FFFFFF;

  --wm-1: #F95B33; --wm-2: #414141; --wm-3: #F95B33;
  --wm-4: #0DB14B; --wm-5: #414141; --wm-6: #F95B33;
  --wm-7: #0DB14B; --wm-8: #F95B33; --wm-9: #414141;

  --wm-rev-1: #F95B33; --wm-rev-2: #FFFFFF; --wm-rev-3: #F95B33;
  --wm-rev-4: #5FD07F; --wm-rev-5: #FFFFFF; --wm-rev-6: #F95B33;
  --wm-rev-7: #5FD07F; --wm-rev-8: #F95B33; --wm-rev-9: #FFFFFF;
}

/* ---- Rooibos Red — Carmién-led ---------------------------------------------
   Warm and agricultural. Suits farm tours, tea tasting, food and produce. ---- */
[data-palette="rooibos"] {
  --ground:     #F7F1E6;
  --ground-alt: #EFE6D6;
  --text:       #2B2B2B;
  --text-soft:  #5F5A52;
  --accent:     #D81E27;
  --accent-2:   #7D8367;
  --accent-3:   #E0CA6C;
  --dark:       #2B2B2B;
  --on-dark:    #F7F1E6;
  --on-accent:  #FFFFFF;

  --wm-1: #D81E27; --wm-2: #2B2B2B; --wm-3: #D81E27;
  --wm-4: #7D8367; --wm-5: #2B2B2B; --wm-6: #D81E27;
  --wm-7: #7D8367; --wm-8: #D81E27; --wm-9: #E0CA6C;

  --wm-rev-1: #E8453C; --wm-rev-2: #FFFFFF; --wm-rev-3: #E8453C;
  --wm-rev-4: #A8BE8C; --wm-rev-5: #FFFFFF; --wm-rev-6: #E8453C;
  --wm-rev-7: #A8BE8C; --wm-rev-8: #E8453C; --wm-rev-9: #E0CA6C;
}

/* ---- Cederberg Dust — Cederberg Circle-led ---------------------------------
   Calm and boutique. Suits hiking, rock art, stargazing, slow / quiet content.
   CAUTION: the muted direction Johan rejected for the brand as a whole. Use as
   a section accent only, never site-wide. Mustard on cream is low contrast —
   do not put body text in --accent-3 here. -------------------------------- */
[data-palette="cederberg"] {
  --ground:     #F6F1E3;
  --ground-alt: #E9E3D0;
  --text:       #3E4234;   /* darkened from the sampled olive for body contrast */
  --text-soft:  #6E7360;
  --accent:     #B87A4E;   /* darkened terracotta so it passes on cream */
  --accent-2:   #7D8367;
  --accent-3:   #AABDCB;
  --dark:       #4A4F3C;
  --on-dark:    #F6F1E3;
  --on-accent:  #FFFFFF;

  --wm-1: #CB8F66; --wm-2: #7D8367; --wm-3: #E0CA6C;
  --wm-4: #AABDCB; --wm-5: #7D8367; --wm-6: #CB8F66;
  --wm-7: #AABDCB; --wm-8: #CB8F66; --wm-9: #7D8367;

  --wm-rev-1: #E0A87E; --wm-rev-2: #C5D3A2; --wm-rev-3: #E0CA6C;
  --wm-rev-4: #AABDCB; --wm-rev-5: #C5D3A2; --wm-rev-6: #E0A87E;
  --wm-rev-7: #AABDCB; --wm-rev-8: #E0A87E; --wm-rev-9: #C5D3A2;
}

/* ---- Padstal Navy — Kardoesie-led ------------------------------------------
   Heritage and premium. Suits accommodation, dining, wine, "plan your stay". - */
[data-palette="padstal"] {
  --ground:     #FFFFFF;
  --ground-alt: #F2F4F8;
  --text:       #16204A;
  --text-soft:  #5A6070;
  --accent:     #F95B33;
  --accent-2:   #16204A;
  --accent-3:   #E0CA6C;
  --dark:       #16204A;
  --on-dark:    #FFFFFF;
  --on-accent:  #FFFFFF;

  --wm-1: #16204A; --wm-2: #F95B33; --wm-3: #16204A;
  --wm-4: #7D8367; --wm-5: #F95B33; --wm-6: #16204A;
  --wm-7: #F95B33; --wm-8: #16204A; --wm-9: #7D8367;

  --wm-rev-1: #FFFFFF; --wm-rev-2: #F95B33; --wm-rev-3: #FFFFFF;
  --wm-rev-4: #A8BE8C; --wm-rev-5: #F95B33; --wm-rev-6: #FFFFFF;
  --wm-rev-7: #F95B33; --wm-rev-8: #FFFFFF; --wm-rev-9: #A8BE8C;
}