/* The only file allowed to hold colour literals.
   Provenance: k-means (k=6, random_state=1) over the opaque logo PNG and banner 1,
   each centre snapped to the nearest real pixel; coordinates live in src/palette.json
   and are re-read from the pixel grid by `npm run gates`. */
:root {
  /* logo PNG pixels */
  --c-base:   #073823; /* logo ground, 0,0 */
  --c-pine:   #297c5e; /* 682,1160 */
  --c-mint:   #46b88e; /* node ring, 1253,574 */
  --c-sage:   #7ec7a7; /* 1134,777 */
  --c-frost:  #bfead4; /* 1388,785 */
  --c-cream:  #f9f9ec; /* avatar face, 1340,635 */
  /* banner 1 pixels */
  --c-abyss:  #012a18; /* 1491,0 */
  --c-forest: #024b2d; /* 661,1 */
  --c-deep:   #097a4e; /* 1517,221 */
  --c-emerald:#1fb079; /* 998,412 */
  --c-glow:   #59d9a6; /* 1310,173 */
  --c-mist:   #e3faea; /* 480,783 */

  /* roles */
  --page:        var(--c-abyss);
  --surface:     var(--c-base);
  --surface-hd:  color-mix(in srgb, var(--c-cream) 5%, var(--c-base));
  --surface-hi:  color-mix(in srgb, var(--c-cream) 9%, var(--c-base));
  --line:        color-mix(in srgb, var(--c-sage) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--c-sage) 34%, transparent);
  --fg:          var(--c-cream);
  --fg-muted:    color-mix(in srgb, var(--c-cream) 72%, var(--c-base));
  --fg-dim:      var(--c-sage);
  --accent:      var(--c-mint);
  --accent-hi:   var(--c-glow);
  --on-accent:   var(--c-abyss);
  --up:          var(--c-glow);
  --down:        var(--c-sage);

  /* metrics measured on the reference route */
  --bar-h: 56px;
  --tabs-h: 44px;
  --radius-card: 10px;
  --radius-ctl: 6px;
  --card-head-h: 52px;
  --th-h: 44px;
  --td-h: 56px;
  --tap: 44px;
  --gutter: 16px;
  --wrap: 1120px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 150ms;
  --shadow-card: 0 0 0 1px color-mix(in srgb, var(--c-abyss) 30%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--c-abyss) 40%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--c-abyss) 55%, transparent);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }