/* Living Ophiolite production foundations.
 * Components consume these shared roles instead of inventing near-identical
 * charcoal panels, green accents, borders, radii and spacing locally. */
:root {
  --cw-surface-panel: rgba(24, 28, 33, .94);
  --cw-surface-panel-strong: rgba(20, 24, 28, .97);
  --cw-surface-control: rgba(255, 255, 255, .045);
  --cw-surface-active: rgba(73, 118, 102, .28);

  --cw-text-primary: #eef4f1;
  --cw-text-secondary: rgba(226, 235, 231, .68);
  --cw-text-muted: rgba(220, 230, 226, .52);

  --cw-border-panel: rgba(218, 231, 226, .28);
  --cw-border-control: rgba(218, 231, 226, .18);
  --cw-border-active: rgba(121, 170, 153, .62);
  --cw-accent: #79aa99;
  --cw-accent-bright: #9bc8b9;

  /* Live-data state is shared across weather and provider health. Colour is
   * always paired with text or a tooltip; it is never the only state cue. */
  --cw-state-current: #79aa99;
  --cw-state-attention: #d5a658;
  --cw-state-unavailable: #d06f6f;
  --cw-state-disabled: #7f8986;

  --cw-radius-panel: 12px;
  --cw-radius-control: 9px;
  --cw-gap-1: 4px;
  --cw-gap-2: 6px;
  --cw-gap-3: 8px;
  --cw-gap-4: 12px;
  --cw-shadow-panel: 0 8px 24px rgba(4, 10, 12, .24), inset 0 1px rgba(255, 255, 255, .035);
}