/* reload.dev · design tokens v2.9.0 */
:root {
  /* colors · brand */
  --rl-blue: #0056ff; /* primary: brand, actions, links */
  --rl-black: #000000; /* secondary: text, dark sections */
  --rl-white: #ffffff; /* main background, text on blue and black */

  /* colors · supporting */
  --rl-blue-50: #ebf1ff; /* section background, seals */
  --rl-blue-300: #6b9bff; /* blue for small text on black */
  --rl-blue-hover: #0047d6; /* blue button hover */
  --rl-gray-50: #f5f6f8; /* alternating section background */
  --rl-gray-200: #e2e5ea; /* borders and dividers in light mode */
  --rl-gray-400: #a3a9b4; /* secondary text on black */
  --rl-gray-500: #5e6470; /* secondary text, captions */
  --rl-gray-700: #3a3f48; /* text on light gray when black is too heavy */
  --rl-gray-800: #2a2d33; /* borders on black */
  --rl-gray-900: #16181d; /* panels on black */

  /* colors · status (platform states only; the site stays blue, black and white) */
  --rl-red: #b51d1c; /* error and destructive on light */
  --rl-red-300: #ffa69b; /* error and destructive on dark */
  --rl-green: #16713a; /* success on light */
  --rl-green-300: #5fd68a; /* success on dark */
  --rl-amber: #9a4d0f; /* warning on light */
  --rl-amber-300: #f6ae6a; /* warning on dark */

  /* typography */
  --rl-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --rl-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --rl-font-mono:
    "DM Mono", ui-monospace, monospace; /* numbers and eyebrows only, never headings */

  /* shape */
  --rl-radius-sm: 8px;
  --rl-radius-md: 12px;
  --rl-radius-lg: 20px;

  /*
   * platform radius scale: the radius follows the size of the shape, so small pieces stay crisp
   * and a nested surface keeps its parent's curve (inner = outer − padding). The site keeps 8/12/20.
   */
  --rl-radius-tick: 3px; /* meter ticks, swatches, chart marks, heat cells */
  --rl-radius-chip: 6px; /* badges, deltas, kbd, small chips (≤ 28 px tall) */
  --rl-radius-control: 10px; /* buttons, inputs, icon tiles, toggles, list rows */
  --rl-radius-inner: 14px; /* wells, menus, popovers, blocks nested in a card */
}