/* Design tokens. Single source of truth for color, type and motion.
   New screens and components must reuse these vars, never hardcode.
   2026-09-25: green (#34c759, the Syntene Learn dot) is now the single accent.
   Buttons and tiles get a physical "key" edge; see --hard / --green-edge. */
:root {
  --bg: #000000;
  --panel: #0a0a0a;
  --card: #1c1c1e;
  --row: #101013;
  --field: #2c2c2e;
  --accent: #34c759;
  --accent-soft: #7ee0a0;
  --text: #ffffff;
  --muted: #a1a1a1;
  --line: #262626;
  --line-strong: #3f3f3f;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Brand green. --green-edge is the extruded side of a green key: darker than
     the face, so the thickness reads even on a black page. */
  --green: #34c759;
  --green-bright: #45d46c;
  --green-edge: #1c7a38;
  --green-ink: #04240f;
  --green-soft: rgba(52, 199, 89, 0.18);
  /* depth. Hub-only 3D surfaces: sheen is the light catching a top edge,
     bevel is the extruded side of a raised control, shade is the drop. */
  --sheen: rgba(255, 255, 255, 0.16);
  --sheen-soft: rgba(255, 255, 255, 0.07);
  --bevel: #08080a;
  --shade: rgba(0, 0, 0, 0.62);
  --ring: rgba(255, 255, 255, 0.14);
}