/* ---------------------------------------------------------------------------
   Service Atlas — design tokens

   Three colours are vocabulary rather than decoration: --from (blue) always
   means "calls this", --to (green) always means "this calls", and --focus
   (amber) is whatever you are pointing at. They mean the same thing on the
   graph, in the legend and on the generated pages.

   Everything else is --node grey. A node only differs if graph.dot gave it a
   `color`, which keeps the highlight legible without dimming anything.
--------------------------------------------------------------------------- */

:root {
  /* surfaces */
  --bg:        #0b0e14;
  --bg-2:      #10151e;
  --panel:     #141a25;
  --panel-2:   #19202c;
  --line:      #222b39;
  --line-2:    #2e3a4c;

  /* type */
  --fg:        #e8ecf3;
  --fg-2:      #9aa7bb;
  --fg-3:      #64748b;

  /* relationship language */
  --from:      #4d9dff;
  --to:        #31d69b;
  --focus:     #ffc14d;

  /* the graph baseline. Nodes are this grey unless graph.dot names a colour. */
  --node:      #7b8698;
  --edge:      #39445a;
  --hit:       #ffffff;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --shell: 1240px;
}