/* Design tokens — derived from docs/research/brand-cues.md */

:root {
  /* Background + foreground */
  --bg:          #0A1A3A;
  --bg-elev:    #12285F;          /* Drupal Navy — one level above bg */
  --fg:          #FFFFFF;
  --fg-muted:    rgba(255, 255, 255, 0.72);
  --fg-subtle:   rgba(255, 255, 255, 0.55);
  --divider:     rgba(255, 255, 255, 0.15);

  /* Circle ramp (deep -> light), brand-anchored to Drupal Blue + Sky */
  --node-1:      #1A3672;
  --node-2:      #006AA9;        /* Drupal Blue */
  --node-3:      #009CDE;        /* Drupal Sky */
  --node-4:      #5EB8E8;
  --node-5:      #CCEDF9;        /* Drupal Light Blue tint */

  /* Accent (focus / hover highlight) */
  --accent:      #FFC423;        /* Drupal Gold — tertiary brand */

  /* Type */
  --font-body:   "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Spacing + shape */
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
}