/* ============================================================
   COLOUR
   Sampled from the brand's aerial ocean photography.
   Serene, natural, never clinical or corporate.
   ============================================================ */

:root {
  /* --- Brand palette (base) --- */
  --ocean-turquoise: #0090A0;   /* Primary. Links, primary buttons, accents. */
  --deep-aqua:       #007A8C;   /* Primary hover, icon strokes. */
  --ocean-ink:       #013440;   /* Headings and body text on light. */
  --cream-sand:      #EFE0D0;   /* Secondary surfaces, soft sections. */
  --dune:            #E0D0C0;   /* Borders, dividers on sand. */
  --foam-white:      #FDFCFA;   /* Default page background. */
  --pure-white:      #FFFFFF;

  /* --- Tints & supporting steps (derived, harmonious) --- */
  --turquoise-tint:  #E3F0F2;   /* Faint aqua wash for soft fills. */
  --turquoise-soft:  #BFE0E4;   /* Hairline aqua borders, focus ring base. */
  --deep-aqua-press: #066573;   /* Pressed state for primary actions. */
  --ink-70:          #355861;   /* Muted body / secondary text. */
  --ink-50:          #5E7980;   /* Captions, meta, placeholder text. */
  --cream-deep:      #E6D3BF;   /* Cream section, slightly deeper. */

  /* --- Heron tonal accents (sampled from the brand mark) --- */
  --heron-mid:       #54889A;   /* Mid feather tone in the tonal heron mark. */
  --heron-light:     #79B4C0;   /* Light feather highlight / wingtip. */

  /* --- Functional fixed colour (never restyle) --- */
  --whatsapp-green:        #25D366;
  --whatsapp-green-press:  #1FB457;

  /* --- Semantic aliases --- */
  --color-bg:              var(--foam-white);
  --color-surface:         var(--pure-white);
  --color-surface-soft:    var(--cream-sand);
  --color-surface-tint:    var(--turquoise-tint);

  --color-text:            var(--ocean-ink);
  --color-text-muted:      var(--ink-70);
  --color-text-subtle:     var(--ink-50);
  --color-text-on-image:   var(--foam-white);
  --color-text-on-accent:  var(--foam-white);

  --color-primary:         var(--ocean-turquoise);
  --color-primary-hover:   var(--deep-aqua);
  --color-primary-press:   var(--deep-aqua-press);
  --color-link:            var(--ocean-turquoise);

  --color-border:          var(--dune);
  --color-border-soft:     var(--turquoise-soft);
  --color-divider:         var(--dune);

  --color-icon:            var(--deep-aqua);

  --color-focus-ring:      var(--ocean-turquoise);
}