/* ==========================================================================
   Bela — Colour tokens
   Palette derived from Google's Material teal, optimised for Bela's UI.
   Base values first, then semantic aliases. Greys come in two forms:
   fixed hex (for print / Pantone matching) and black-with-alpha (for screen).
   ========================================================================== */
:root {
  /* ---- Core neutrals ---- */
  --white: #ffffff;
  --black: #000000;

  /* ---- Teal (the Bela colour) ---- */
  --teal-base: #009587;  /* Material parent teal — deepest */
  --teal-main: #00bea4;  /* THE Bela teal — primary brand colour */
  --teal-01:   #1ce8b5;  /* brighter — rollovers, active accents */
  --teal-02:   #63ffd9;  /* brighter still — press / highlight */
  --teal-03:   #a6ffea;  /* lightest wash — logo fill, tints */

  /* ---- Accent colours (small visual accents only) ---- */
  --accent-coral:  #ff5e5b;  /* coral pink — errors, destructive, alerts */
  --accent-yellow: #fff07c;  /* sunny yellow — highlight, hover wash */
  --accent-amber:  #f26d21;  /* amber — occasional warm accent */
  --accent-coral-soft: #ff918e; /* softened coral — delete button rest state */

  /* ---- Light grey palette (fixed hex) ---- */
  --grey-light-00: #fdfdfd;
  --grey-light-01: #f5f5f5;
  --grey-light-02: #e4e4e4;
  --grey-light-03: #d5d5d5;
  --grey-light-04: #a8a9a7;

  /* ---- Dark grey palette (fixed hex) ---- */
  --grey-dark-00: #b7b7b7;
  --grey-dark-01: #969696;
  --grey-dark-02: #656565;
  --grey-dark-03: #353535;
  --grey-dark-04: #000807;

  /* ---- Black-with-alpha greys (screen only) ---- */
  --grey-ultralight: rgba(0, 0, 0, 0.05);
  --grey-light:      rgba(0, 0, 0, 0.1);
  --grey-mid:        rgba(0, 0, 0, 0.3);
  --grey-dark:       rgba(0, 0, 0, 0.6);

  /* ---- Named UI greys (from the IDE chrome) ---- */
  --grey-tabs:     #c9c9c9;  /* tab rail, toolbar background */
  --grey-toolbar:  #bcbcbc;
  --grey-editorbg: #eeeeee;
  --grey-panel:    #f1f1f1;  /* accordion headers, inactive fills */
  --grey-border:   #bdbdbd;  /* disabled borders, hairlines */

  /* ---- Console semantic text colours ---- */
  --console-shell: #606096;  /* shell (#) lines */
  --console-git:   #609660;  /* git: lines */
  --console-bela:  #406464;  /* bela: lines */

  /* ======================================================================
     SEMANTIC ALIASES — reach for these in product UI
     ====================================================================== */

  /* Text */
  --text-heading: rgba(0, 0, 0, 0.8);  /* headings over light */
  --text-body:    rgba(0, 0, 0, 0.85); /* body copy */
  --text-muted:   rgba(0, 0, 0, 0.6);  /* secondary / captions */
  --text-faint:   rgba(0, 0, 0, 0.3);  /* placeholder / disabled */
  --text-on-teal: rgba(0, 0, 0, 0.8);  /* dark text over bright teal */
  --text-inverse: #ffffff;             /* text over dark / saturated teal */

  /* Brand */
  --brand:        var(--teal-main);
  --brand-hover:  var(--teal-01);
  --brand-press:  var(--teal-02);
  --brand-deep:   var(--teal-base);

  /* Surfaces */
  --surface-page:   #ffffff;
  --surface-raised: #f9f9f9;  /* hero bar, dropdown menus */
  --surface-sunken: var(--grey-panel);
  --surface-card:   #ffffff;

  /* Lines & focus */
  --border-hairline: rgba(0, 0, 0, 0.1);
  --border-strong:   var(--grey-border);
  --focus-ring:      var(--teal-main);

  /* States */
  --state-hover-wash: rgba(255, 240, 124, 0.5); /* yellow link/list hover */
  --state-selected:   rgba(255, 255, 0, 0.2);   /* file/example selection */
  --danger:  var(--accent-coral);
  --warning: var(--accent-yellow);
  --success: var(--teal-01);
}