/* syriaproxy — design tokens v2. Green = the route (accent), red = the point (the mark and errors only). */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap");

:root {
  --ink: #0E0F0C;
  --stone: #F3F0E8;
  --ash: #6B6A63;
  --line: #DCD7CB;
  --green: #007A3D;
  --red: #CE1126;

  --bg: var(--stone);
  --surface: #FAF8F3;
  --text: var(--ink);
  --muted: var(--ash);
  --border: var(--line);
  --accent: var(--green);
  --accent-text: var(--stone);
  --danger: var(--red);

  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --size-s: 14px;
  --size-m: 16px;
  --size-l: 28px;
  --weight: 400;
  --weight-strong: 500;

  --radius: 10px;
  --space: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --surface: #171915;
    --text: var(--stone);
    --muted: #9C9A91;
    --border: #2A2C27;
    --accent: #4CB07D;
    --accent-text: var(--ink);
    --danger: #EF5A5F;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--ink);
  --surface: #171915;
  --text: var(--stone);
  --muted: #9C9A91;
  --border: #2A2C27;
  --accent: #4CB07D;
  --accent-text: var(--ink);
  --danger: #EF5A5F;
  color-scheme: dark;
}