/* ==========================================================================
   EPA — Color tokens
   Brand: deep indigo (from the orbital mark) + technical steel-blue accent
   Neutrals: cool steel grays. Two-mode canvas: light (catalogue) / dark (story)
   ========================================================================== */
:root {
  /* --- Brand: Indigo (from logo) --------------------------------------- */
  --brand-900: #1e1c57;   /* deepest — pressed / on-tint text            */
  --brand-800: #26246a;
  --brand-700: #2d2b78;   /* PRIMARY brand indigo                         */
  --brand-600: #37338c;
  --brand-500: #3e3c99;   /* bright — hover                               */
  --brand-300: #6a68c0;   /* muted indigo — icons on tint                */
  --brand-100: #e6e5f5;   /* tint surface                                */
  --brand-050: #f2f2fb;

  --primary:        var(--brand-700);
  --primary-bright: var(--brand-500);
  --primary-deep:   var(--brand-900);
  --primary-tint:   var(--brand-100);
  --on-primary:     #ffffff;

  /* --- Accent: technical steel-blue ----------------------------------- */
  --accent-700: #235389;  /* deep / pressed                              */
  --accent-600: #2f6db0;  /* ACCENT steel-blue                           */
  --accent-500: #3e82c9;  /* bright / hover                              */
  --accent-300: #7fb0dd;
  --accent-100: #e4eef7;  /* tint surface                                */
  --accent:      var(--accent-600);
  --link:        var(--accent-700);

  /* --- Surface -------------------------------------------------------- */
  --canvas-light:     #ffffff;   /* catalogue mode                        */
  --canvas-dark:      #0d1017;    /* storytelling mode — steel near-black */
  --surface-soft:     #f4f6f8;    /* cool off-white insets                */
  --surface-muted:    #eceff3;    /* one step down from soft              */
  --surface-card:     #ffffff;
  --surface-deep:     #141a24;    /* inset card on dark                   */
  --surface-elevated: #1b2330;    /* elevated card on dark                */

  /* --- Hairlines & dividers ------------------------------------------ */
  --hairline-light:  #e3e7ec;
  --hairline-strong: #cdd4dc;
  --hairline-dark:   rgba(255,255,255,0.12);

  /* --- Text (cool steel grays) --------------------------------------- */
  --ink:      #14181f;   /* primary text                                 */
  --body:     #1e232b;   /* long-form body                               */
  --charcoal: #3a424d;   /* captions, secondary nav                      */
  --mute:     #5a6472;   /* supporting text                              */
  --stone:    #8a93a1;   /* metadata                                     */
  --faint:    #c3c9d2;   /* disabled foreground                          */

  --on-dark:      #ffffff;
  --on-dark-mute: rgba(255,255,255,0.70);
  --on-dark-faint:rgba(255,255,255,0.45);

  /* --- Semantic ------------------------------------------------------ */
  --success:      #1e874b;  --success-tint: #e4f2ea;
  --warning:      #b8760a;  --warning-tint: #f8efdd;
  --danger:       #c43d3d;  --danger-tint:  #f8e5e5;
  --info:         var(--accent-600); --info-tint: var(--accent-100);

  /* --- Material accents (illustrations / category chips ONLY) --------- */
  --mat-polymer: #0e8c86;   /* thermoplastic / polymer                    */
  --mat-rubber:  #2b2f36;   /* hule / rubber                              */
  --mat-steel:   #6e7a8a;   /* molds / machinery                          */
  --mat-heat:    #e0752a;   /* thermoformed ducts (heat)                  */
  --mat-seal:    #7a8f2f;   /* seals / gaskets                            */
}