/* ============================================================
   TEMBO — Colour tokens
   "Engineered gradients that reflect strength, reliability and
   performance. Inspired by real environments, built for impact."
   ============================================================ */

:root {
  /* ---- Brand palette (the five) -------------------------- */
  --tembo-tactical-green: #3D4A23; /* Deep Tactical Green — primary */
  --tembo-olive-drab:     #5F6B34; /* Olive Drab */
  --tembo-hazard-yellow:  #D9A520; /* Hazard Yellow — accent / signal */
  --tembo-steel-grey:     #4E555F; /* Steel Grey */
  --tembo-safari-sand:    #EFE5D2; /* Safari Sand — light surface / ink-on-dark */

  /* ---- Green scale (tactical green ramp) ----------------- */
  --green-950: #11140A;
  --green-900: #181C0F;
  --green-800: #23281A;
  --green-700: #2E371D;
  --green-600: #3D4A23;  /* = tactical green */
  --green-500: #4B5A2A;
  --green-400: #5F6B34;  /* = olive drab */
  --green-300: #76833F;
  --green-200: #97A35C;

  /* ---- Yellow scale (hazard) ----------------------------- */
  --yellow-700: #9C7415;
  --yellow-600: #B8851A;
  --yellow-500: #D9A520;  /* = hazard yellow */
  --yellow-400: #E6BA43;
  --yellow-300: #F0D072;

  /* ---- Steel / neutral scale ----------------------------- */
  --steel-900: #20242A;
  --steel-800: #2C3138;
  --steel-700: #3A4047;
  --steel-600: #4E555F;  /* = steel grey */
  --steel-500: #6A727C;
  --steel-400: #8B939D;
  --steel-300: #B2B9C0;

  /* ---- Warm ink / earth darks (page backgrounds) --------- */
  --ink-950: #0F110A;
  --ink-900: #15170F;
  --ink-850: #1A1D13;
  --ink-800: #20241A;

  /* ---- Sand scale (light surfaces / text on dark) -------- */
  --sand-100: #F7F2E8;
  --sand-200: #EFE5D2;  /* = safari sand */
  --sand-300: #DDD0B6;
  --sand-400: #C4B697;

  /* ---- Signal colours ------------------------------------ */
  --signal-charge:  #D9A520;  /* charging / energy = hazard yellow */
  --signal-ready:   #8FB339;  /* "READY" / online green */
  --signal-warning: #E6BA43;
  --signal-danger:  #C0402B;  /* DANGER signage red */
  --signal-info:    #6A8CAF;

  /* ============================================================
     Semantic aliases — reach for these in product UI
     ============================================================ */

  /* Dark theme is the brand default (tactical UI) */
  --surface-base:    var(--ink-900);
  --surface-raised:  var(--ink-800);
  --surface-card:    #242A1B;
  --surface-card-2:  #2C331F;
  --surface-inverse: var(--sand-200);
  --surface-grille:  #11140A;   /* deepest panels, charts */

  --brand-primary:   var(--green-600);
  --brand-primary-strong: var(--green-700);
  --brand-accent:    var(--yellow-500);
  --brand-accent-strong: var(--yellow-600);

  --text-primary:    var(--sand-200);
  --text-secondary:  #B9B49E;
  --text-muted:      #8A8C77;
  --text-on-accent:  var(--ink-950);
  --text-on-light:   var(--green-800);
  --text-link:       var(--yellow-500);

  --border-subtle:   rgba(239, 229, 210, 0.10);
  --border-default:  rgba(239, 229, 210, 0.16);
  --border-strong:   rgba(239, 229, 210, 0.30);
  --border-accent:   var(--yellow-500);

  /* Light theme (brochure / documents on sand) */
  --surface-light:        var(--sand-200);
  --surface-light-raised: var(--sand-100);
  --text-on-light-1:      var(--green-800);
  --text-on-light-2:      #5A5D47;
  --border-on-light:      rgba(35, 40, 26, 0.16);

  /* ---- Hazard tape (industrial diagonal warning fill) ---- */
  --hazard-tape: repeating-linear-gradient(
      -45deg,
      var(--yellow-500) 0 22px,
      var(--ink-950) 22px 44px);
}