/* ============================================================
   kizikula · colour
   ------------------------------------------------------------
   A warm, film-toned, deliberately muted palette drawn from the
   place itself: pink coral limestone, the turquoise of the
   Kizimkazi channel, sun-bleached concrete, foliage and the
   amber of the sunset. Quiet rather than needy for attention.
   ============================================================ */
:root {
  /* ---- Warm neutral spine (paper → ink) ---- */
  --shell:        #fbf7f0; /* lightest — raised surfaces            */
  --paper:        #f4ede1; /* primary background, warm bone         */
  --paper-dim:    #ece2d2; /* sunken / alternating surface          */
  --sand:         #e3d6c0; /* tonal blocks, fills                   */
  --taupe:        #c9b89c; /* muted tonal, disabled                 */
  --stone:        #9c8e78; /* warm grey-brown                       */
  --ink-faint:    #8c8475; /* tertiary text                         */
  --ink-muted:    #6b6356; /* secondary text                        */
  --ink-soft:     #3d3830; /* strong body on light                  */
  --ink:          #1e1b16; /* near-black, the logo black            */

  /* ---- Brand hues (earth + sea + sun) ---- */
  --coral:        #c0876a; /* pink coral limestone — primary accent */
  --coral-deep:   #9a6149; /* pressed / strong coral                */
  --coral-tint:   #e7cdba; /* coral wash / soft fill                */
  --sea:          #2f6d68; /* deep channel teal                     */
  --sea-deep:     #234f4b; /* pressed teal                          */
  --sea-soft:     #6fa39b; /* light teal                            */
  --sea-tint:     #cadedb; /* teal wash                             */
  --amber:        #d49a59; /* sunset amber                          */
  --amber-deep:   #b67c3c; /* pressed amber                         */
  --olive:        #6c6e4d; /* foliage green                         */
  --olive-tint:   #d6d6bf; /* foliage wash                          */

  /* ---- Hairlines & scrims ---- */
  --line:         rgba(30, 27, 22, 0.14); /* default hairline       */
  --line-strong:  rgba(30, 27, 22, 0.26); /* emphasised divider     */
  --line-faint:   rgba(30, 27, 22, 0.08); /* whisper rule           */
  --scrim:        rgba(20, 17, 13, 0.46);  /* over-image protection */
  --scrim-soft:   rgba(20, 17, 13, 0.22);

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  --bg:               var(--paper);
  --bg-sunk:          var(--paper-dim);
  --surface:          var(--shell);
  --surface-tonal:    var(--sand);
  --text:             var(--ink);
  --text-secondary:   var(--ink-muted);
  --text-tertiary:    var(--ink-faint);
  --text-on-accent:   var(--shell);
  --text-on-dark:     var(--paper);

  --border:           var(--line);
  --border-strong:    var(--line-strong);
  --border-faint:     var(--line-faint);

  --accent:           var(--coral);
  --accent-press:     var(--coral-deep);
  --accent-wash:      var(--coral-tint);
  --focus:            var(--sea);

  /* ---- Status (kept earthy, never neon) ---- */
  --positive:         var(--sea);
  --positive-wash:    var(--sea-tint);
  --notice:           var(--amber);
  --notice-wash:      var(--olive-tint);
  --critical:         var(--coral-deep);
  --critical-wash:    var(--coral-tint);

  /* ---- Dark ground (footers, hero scrims, the "badge") ---- */
  --ground:           var(--ink);
  --ground-2:         #2a261f;
}