/* SYNC'D brand tokens — mirrored 1:1 from design/*_mockups.html and
   packages/syncd_ui/lib/src/tokens.dart. Single source of truth for the site. */
:root {
  /* Brand gradient (orange → yellow) */
  --g1: #FFD25E;
  --g2: #F7931E;
  --accent: #F2972E;
  --on-gradient: #3A2400; /* ink that sits on the gradient */

  /* Semantic palette (constant across light & dark) */
  --blue: #3D8BFD;
  --green: #2FA968;
  --amber: #F4B12E;
  --red: #EE5B47;

  /* Light surfaces */
  --ink: #1A1D1F;
  --muted: #727A82;
  --line: #ECEFF2;
  --bg: #F3F5F7;
  --card: #FFFFFF;

  /* Radii */
  --r-card: 18px;
  --r-btn: 14px;
  --r-chip: 20px;

  /* Layout */
  --maxw: 1120px;
  --gradient: linear-gradient(120deg, var(--g1), var(--g2));
}

/* Dark mode — follows the OS unless the user forces a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F2F4F7;
    --muted: #9AA3AD;
    --line: #252B33;
    --bg: #0E1116;
    --card: #191F27;
  }
}

:root[data-theme="dark"] {
  --ink: #F2F4F7;
  --muted: #9AA3AD;
  --line: #252B33;
  --bg: #0E1116;
  --card: #191F27;
}