/* Page CHROME only. A diagram is coloured from `data-role` through diagrams.css, and a tinted
   dialog overrides most of this with the category tint (styles.css). */
:root {
  /* Two card shades: hover is a lift, not a highlight. */
  --bg-card:        #1a1538;
  --bg-card-hover:  #1e1a38;
  --border:         #2e274e;
  --border-subtle:  #1e1935;

  /* Six shades: the grid stacks title, desc, meta and nav, each needing its own contrast. */
  --text:           #ece9ff;
  --text-bright:    #f9f8ff;
  --text-muted:     #8d8e96;
  --text-dim:       #9b95b8;
  --text-nav:       #e8e4ff;
  --text-card-desc: #c7c2ed;

  /* Lavender, shared with /cli/ and the hub. A tinted dialog remaps all three onto its tint. */
  --accent:         #e0cdff;
  --accent-glow:    rgba(224, 205, 255, 0.16);
  --accent-border:  rgba(224, 205, 255, 0.28);

  /* Starred: sky cyan, the same token /cli/ uses for its own stars. */
  --starred-color:  #5cd9ff;
  --starred-glow:   rgba(92, 217, 255, 0.13);
  --starred-border: rgba(92, 217, 255, 0.30);

  /* Copy confirmation. The only green on the page. */
  --success-color:  #5cb85c;
  --toast-bg:       #1e1438;
  --toast-text:     #c4a8ff;

  /* Chrome per category, keyed off `data-cat`. Deliberately NOT the kit tint that paints the
     diagram (C-15): cluster is #7d86ff here, rgb(192,176,255) in cluster-kit.js. Retint: C-22. */
  --network-color:    #4fe5ff;
  --network-glow:     rgba(79, 229, 255, 0.13);
  --network-border:   rgba(79, 229, 255, 0.28);

  --storage-color:    #5eca94;
  --storage-glow:     rgba(94, 202, 148, 0.13);
  --storage-border:   rgba(94, 202, 148, 0.28);

  --workloads-color:  #5bb8ff;
  --workloads-glow:   rgba(75, 168, 255, 0.13);
  --workloads-border: rgba(55, 158, 255, 0.28);

  --cluster-color:    #7d86ff;
  --cluster-glow:     rgba(125, 134, 255, 0.13);
  --cluster-border:   rgba(125, 134, 255, 0.28);

  /* Untinted fallback. Every card ships tinted today, so styles.css overrides stroke and arrow.
     Per-role classes live in diagrams.css. */
  --diag-stroke:       #b3a8e0;
  --diag-stroke-soft:  rgba(179, 168, 224, 0.4);
  --diag-fill-soft:    rgba(40, 32, 72, 0.65);
  --diag-node-fill:    rgba(28, 22, 56, 0.7);
  --diag-node-stroke:  rgba(155, 149, 184, 0.45);
  --diag-text:         #e8e4ff;
  --diag-text-dim:     #c7c2ed;
  --diag-arrow:        #c7c2ed;
  --diag-arrow-dim:    rgba(199, 194, 237, 0.45);
}