/* Meshmakers design system — foundation tokens (one source for every landing page).

   Values come from the Meshmakers design system (Brand Manual 2025; archive
   Meshmakers-Designsystem.zip, tokens/colors.css) and are identical to what AB#7688
   applied per site. Pages alias them to their own semantic names, e.g.
   `--accent: var(--mm-mint)`; they never redefine a brand value. Dark surfaces: every
   public page sits on Deep Sea. On a white surface darken the brand tones for AA text
   contrast (mint #0a6b5c, neo cyan #0077a3, ash #6b7a86).
   Change a value here ONLY — scripts/check-design-system.sh fails when a token,
   font or key-visual copy appears anywhere else. */
:root{
  /* Primary — the Octo identity */
  --mm-mint:        #64ceb9;
  --mm-deep-sea:    #07172b;
  /* Secondary — ocean/mesh cools */
  --mm-neo-cyan:    #00a8dc;
  --mm-indigogo:    #546fbd;
  --mm-iron-navy:   #394555;
  --mm-ash-blue:    #9292a6;
  /* Tertiary — accent pops, used sparingly */
  --mm-toffee:      #da9162;
  --mm-bubblegum:   #ec658f;
  --mm-lilac-glow:  #c861d6;
  --mm-royal-violet:#6c4da8;

  /* Cool neutral ramp ending at Deep Sea */
  --mm-white:       #ffffff;
  --mm-black:       #000000;
  --mm-neutral-50:  #f5f7f8;
  --mm-neutral-100: #e8ebee;
  --mm-neutral-200: #d3d8de;
  --mm-neutral-300: #aab1bb;
  --mm-neutral-400: #7e8896;
  --mm-neutral-500: #5c6675;
  --mm-neutral-600: #434e5e;
  --mm-neutral-700: #2e3846;
  --mm-neutral-800: #182333;
  --mm-neutral-900: #07172b;

  /* Energy sector ramp, built from Neo Cyan */
  --mm-energy-100:  #d6f0fa;
  --mm-energy-200:  #9adcf2;
  --mm-energy-300:  #4cc3e8;
  --mm-energy-400:  #00a8dc;
  --mm-energy-500:  #0090bf;
  --mm-energy-600:  #00719a;
  --mm-energy-700:  #0b4f6e;
  /* Energy flow-line hues: PV = Toffee, grid = Neo Cyan, community = Mint, storage = Indigogo */
  --mm-flow-pv:        var(--mm-toffee);
  --mm-flow-grid:      var(--mm-neo-cyan);
  --mm-flow-community: var(--mm-mint);
  --mm-flow-storage:   var(--mm-indigogo);

  /* Dark-surface layer used by every public page (Deep Sea throughout) */
  --mm-surface-lifted: #0c2033;   /* lifted band for alternating sections */
  --mm-surface-card:   #182333;   /* cards, white 14% hairline */
  --mm-surface-footer: #050f1d;   /* darkest step */
  --mm-text:           var(--mm-white);
  --mm-text-muted:     rgba(255,255,255,.68);
  --mm-text-subtle:    rgba(255,255,255,.42);
  --mm-border:         rgba(255,255,255,.14);
  --mm-border-strong:  rgba(255,255,255,.32);

  /* Action states and tints of the accents */
  --mm-mint-hover:     #54bda8;
  --mm-mint-press:     #489f8d;
  --mm-mint-tint:      rgba(100,206,185,.14);
  --mm-neo-cyan-tint:  rgba(0,168,220,.14);
  --mm-toffee-tint:    rgba(218,145,98,.14);
  --mm-bubblegum-tint: rgba(236,101,143,.14);

  /* Type */
  --mm-font:           'Montserrat','Segoe UI',Helvetica,Arial,sans-serif;
  --mm-tracking-caps:  .06em;

  /* Spacing — 8px square grid */
  --mm-space-1: 4px;
  --mm-space-2: 8px;
  --mm-space-3: 12px;
  --mm-space-4: 16px;
  --mm-space-6: 24px;
  --mm-space-8: 32px;
  --mm-space-12: 48px;
  --mm-space-16: 64px;
  --mm-space-24: 96px;

  /* Corners: sharp. 2px only on buttons and inputs. */
  --mm-radius-none: 0;
  --mm-radius-sm:   2px;

  /* Functional elevation only */
  --mm-shadow-sm:   0 1px 2px rgba(7,23,43,.08);
  --mm-shadow-md:   0 4px 12px rgba(7,23,43,.10);
  --mm-focus-ring:  0 0 0 3px rgba(0,168,220,.35);
}