:root {
  /* ---- Brand ---------------------------------------------------------- */
  /* Railo signal blue — confident, modern, derived from rail signalling.   */
  --railo-blue-50:  #eaf2ff;
  --railo-blue-100: #d4e4ff;
  --railo-blue-300: #7eb0ff;
  --railo-blue-500: #0a5cff;   /* primary brand / action */
  --railo-blue-600: #0048d6;   /* hover / pressed */
  --railo-blue-700: #0036a3;   /* deep, on light backgrounds */

  /* ---- Ink & neutrals (Apple-aligned) --------------------------------- */
  --ink-900: #1d1d1f;   /* primary text, near-black */
  --ink-700: #424245;
  --ink-500: #6e6e73;   /* secondary text */
  --ink-400: #86868b;   /* tertiary / captions */
  --line-300: #d2d2d7;  /* hairline borders */
  --line-200: #e8e8ed;
  --surface-100: #f5f5f7; /* tinted section background */
  --surface-050: #fbfbfd;
  --white: #ffffff;
  --black: #000000;

  /* ---- Semantic ------------------------------------------------------- */
  --green-500: #248a3d;
  --green-50:  #e7f6ec;
  --red-500:   #d70015;
  --red-50:    #fdeaec;
  --amber-500: #b25000;
  --amber-50:  #fbefe3;

  /* ---- Semantic aliases ----------------------------------------------- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-on-accent: var(--white);
  --text-link: var(--railo-blue-500);

  --surface-page: var(--white);
  --surface-section: var(--surface-100);
  --surface-card: var(--white);
  --surface-inverse: var(--ink-900);

  --border-hairline: var(--line-300);
  --border-subtle: var(--line-200);

  --accent: var(--railo-blue-500);
  --accent-hover: var(--railo-blue-600);
  --accent-pressed: var(--railo-blue-700);
}