/* ===========================================================================
   GoEco — Color tokens
   Derived from the logo (yellow + charcoal) and the Tātaia Cultural Capability
   Book / campaign social posts (cyan, magenta, warm charcoal on off-white).
   =========================================================================== */
:root {
  /* --- Brand base palette --- */
  --go-yellow:        #FFE600; /* hero / primary — the logo yellow */
  --go-yellow-deep:   #F5C400; /* pressed / shadow variant of yellow */
  --go-cyan:          #5CE1E6; /* secondary accent — te taiao / water */
  --go-magenta:       #EC1E97; /* campaign accent — sticker capsule labels */
  --go-ink:           #2A2C21; /* warm charcoal — primary text & line icons */
  --go-ink-soft:      #454345; /* softer charcoal for secondary text */
  --go-graphite:      #737373; /* muted grey — captions, meta */
  --go-paper:         #FEFEFD; /* off-white surface (not pure white) */
  --go-white:         #FFFFFF;
  --go-cloud:         #EFEEEE; /* light grey fill / hairline zone */

  /* --- Semantic status --- */
  --go-green:         #00D300; /* success — the check mark */
  --go-green-ring:    #3FB24F;
  --go-red:           #FF1616; /* alert / stop */
  --go-blue:          #2E6FB5; /* rare info / infographic accent */

  /* ---------------------------------------------------------------------
     Semantic aliases — reference these in components, not the raw hexes.
     --------------------------------------------------------------------- */
  --color-bg:             var(--go-paper);
  --color-bg-alt:         var(--go-cloud);
  --color-surface:        var(--go-white);
  --color-surface-invert: var(--go-ink);

  --text-strong:          var(--go-ink);
  --text-body:            var(--go-ink-soft);
  --text-muted:           var(--go-graphite);
  --text-on-yellow:       var(--go-ink);
  --text-on-ink:          var(--go-paper);
  --text-on-cyan:         var(--go-ink);
  --text-on-magenta:      var(--go-white);

  --brand-primary:        var(--go-yellow);
  --brand-primary-press:  var(--go-yellow-deep);
  --brand-secondary:      var(--go-cyan);
  --brand-accent:         var(--go-magenta);

  --border-ink:           var(--go-ink);
  --border-hairline:      color-mix(in srgb, var(--go-ink) 12%, transparent);

  --focus-ring:           var(--go-cyan);
}