/* Nature Connect — Colour System
   Anchored by Deep Indigo. Malachite (green) and Picton Blue (cyan) are the
   energy colours. Earth Orange, Soft Grey-Blue and Eerie Black are support.
   Brand rule: flat colour only, NO gradients on logo/brand marks.
   House rule: backgrounds stay WHITE. Indigo is for ink, marks and teardrops,
   not for filling page or section backgrounds. */

:root {
  /* ---- Brand core (exact brand-guide values) ---- */
  --nc-indigo:      #2B3E78;  /* Deep Indigo  — anchor */
  --nc-green:       #00C82A;  /* Malachite    — growth */
  --nc-cyan:        #46D1F1;  /* Picton Blue  — water  */
  --nc-orange:      #DA8857;  /* Earth Orange — soil   */
  --nc-grey-blue:   #A2B8C3;  /* Soft Grey-Blue — mist */
  --nc-black:       #231F20;  /* Eerie Black  — ink    */
  --nc-white:       #FFFFFF;

  /* ---- Indigo scale ---- */
  --nc-indigo-900: #1a2750;
  --nc-indigo-800: #213160;
  --nc-indigo-700: #243670;
  --nc-indigo-600: #2B3E78;
  --nc-indigo-300: #97a3c5;
  --nc-indigo-100: #e5e9f3;
  --nc-indigo-50:  #f2f4fa;

  /* ---- Green (Malachite) scale ---- */
  --nc-green-700:  #00a523;
  --nc-green-600:  #00C82A;
  --nc-green-100:  #d7f7de;
  --nc-green-50:   #edfcf0;

  /* ---- Cyan (Picton Blue) scale ---- */
  --nc-cyan-700:   #1fb6da;
  --nc-cyan-600:   #46D1F1;
  --nc-cyan-100:   #d9f4fc;
  --nc-cyan-50:    #edfafe;

  /* ---- Orange (Earth) scale ---- */
  --nc-orange-700: #c2703f;
  --nc-orange-600: #DA8857;
  --nc-orange-100: #f6e3d6;
  --nc-orange-50:  #fcf3ec;

  /* ---- Neutral scale (built around Soft Grey-Blue) ---- */
  --nc-grey-50:   #f6f8f9;
  --nc-grey-100:  #eef2f4;
  --nc-grey-200:  #dde6ea;
  --nc-grey-300:  #c4d2d9;
  --nc-grey-400:  #A2B8C3;
  --nc-grey-500:  #7d96a3;
  --nc-grey-600:  #5d7280;
  --nc-grey-700:  #3f4f59;

  /* ---- Functional (derived — not in brand guide, flagged) ---- */
  --nc-red:       #d6453f;  /* error  */
  --nc-red-50:    #fdeceb;
  --nc-amber:     #DA8857;  /* warning reuses Earth Orange */

  /* ================= SEMANTIC ALIASES ================= */
  /* Surfaces — white-first */
  --surface-page:        var(--nc-white);
  --surface-card:        var(--nc-white);
  --surface-subtle:      var(--nc-grey-50);
  --surface-muted:       var(--nc-grey-100);
  --surface-cyan:        var(--nc-cyan-50);
  --surface-green:       var(--nc-green-50);
  --surface-indigo:      var(--nc-indigo-50);

  /* Text */
  --text-primary:        var(--nc-indigo);     /* headings, brand ink */
  --text-body:           #2a3340;              /* long-form body */
  --text-muted:          var(--nc-grey-600);
  --text-subtle:         var(--nc-grey-500);
  --text-on-indigo:      var(--nc-white);
  --text-on-cyan:        var(--nc-indigo);
  --text-on-green:       var(--nc-white);
  --text-link:           var(--nc-indigo);

  /* Brand roles */
  --brand-primary:       var(--nc-indigo);
  --brand-secondary:     var(--nc-cyan);
  --brand-accent:        var(--nc-green);
  --brand-warm:          var(--nc-orange);

  /* Lines & rings */
  --border:              var(--nc-grey-200);
  --border-strong:       var(--nc-grey-300);
  --focus-ring:          var(--nc-cyan);

  /* ---- Leverage points (external architecture, Integrated Report YE2026) ----
     LP1 Build Whole-School Environmental Stewardship  → Earth Orange
     LP2 Create Green Economy Pathways for Young People → Malachite
     LP3 Scale People-Centred Urban Conservation        → Deep Indigo
     Cyan is the CONNECTOR between them, never a leverage point colour.
     Each LP gets: accent (eyebrow, rules, numerals, page-edge bar),
     tint (sidebar strip, quote/stat box fill) and icon fill. */
  --lp1-accent:      var(--nc-orange);
  --lp1-tint:        var(--nc-orange-50);
  --lp1-icon:        var(--nc-orange);
  --lp2-accent:      var(--nc-green);
  --lp2-tint:        var(--nc-green-50);
  --lp2-icon:        var(--nc-green);
  --lp3-accent:      var(--nc-indigo);
  --lp3-tint:        var(--nc-indigo-50);
  --lp3-icon:        var(--nc-grey-blue);
  --lp-connector:    var(--nc-cyan);

  /* Status */
  --status-success:      var(--nc-green-600);
  --status-success-bg:   var(--nc-green-50);
  --status-info:         var(--nc-cyan-700);
  --status-info-bg:      var(--nc-cyan-50);
  --status-warning:      var(--nc-orange-600);
  --status-warning-bg:   var(--nc-orange-50);
  --status-danger:       var(--nc-red);
  --status-danger-bg:    var(--nc-red-50);
}
