/* RouteSeam design tokens — the single source of truth.
   Import this before any component CSS. Never restate these values by hand. */

:root {
  /* Backgrounds — elevation via steps + borders, never shadows */
  --rm-bg: #000000;          /* canvas */
  --rm-bg-raised: #0a0a0a;   /* cards */
  --rm-bg-elevated: #111111; /* modals, inputs */
  --rm-bg-hover: #161616;    /* row hover */

  /* Borders */
  --rm-border: #1f1f1f;
  --rm-border-hover: #262626;
  --rm-border-strong: #333333;

  /* Text */
  --rm-text: #ffffff;
  --rm-text-secondary: #a1a1aa;
  --rm-text-tertiary: #52525b; /* meta, placeholders */

  /* Accent — mint. Exact. Owns success exclusively. */
  --rm-mint: #3ecf8e;
  --rm-mint-hover: #55dba0;
  --rm-mint-active: #2fb87a;
  --rm-mint-subtle-bg: rgba(62, 207, 142, 0.08);
  --rm-mint-subtle-border: rgba(62, 207, 142, 0.35);
  --rm-on-accent: #00130a;   /* text on mint buttons */
  --rm-glow: 0 0 24px rgba(62, 207, 142, 0.25); /* hero moments ONLY */

  /* States */
  --rm-amber: #d9a73e;
  --rm-amber-subtle-bg: rgba(217, 167, 62, 0.08);
  --rm-amber-subtle-border: rgba(217, 167, 62, 0.3);
  --rm-red: #e5484d;
  --rm-red-subtle-bg: rgba(229, 72, 77, 0.08);
  --rm-red-subtle-border: rgba(229, 72, 77, 0.3);
  --rm-gray: #52525b;
  --rm-gray-subtle-bg: rgba(82, 82, 91, 0.08);
  --rm-gray-subtle-border: rgba(82, 82, 91, 0.3);

  /* Type */
  --rm-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --rm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  /* Scale (size/line): 12/16 13/20 14/22(default) 16/24 20/28 24/32 32/40 48/56.
     Weights 400/500/600 only. Letter-spacing -0.01em at 20px+. */

  /* Space — 4px grid */
  --rm-page-pad: 32px;
  --rm-card-pad: 20px 24px;
  --rm-section-gap: 32px;

  /* Radii */
  --rm-radius-control: 6px;
  --rm-radius-card: 10px;
  --rm-radius-pill: 999px;

  /* Motion — the only loops allowed: provisioning pulse (1.6s), shimmer (1.4s) */
  --rm-ease: cubic-bezier(0, 0, 0.2, 1);
  --rm-fast: 120ms;
  --rm-slow: 180ms;
}

/* Base */
html { background: var(--rm-bg); color-scheme: dark; } /* dark only — never invert */
body {
  margin: 0;
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
code, kbd, .rm-mono { font-family: var(--rm-font-mono); } /* domains, DNS, keys, slugs */
::placeholder { color: var(--rm-text-tertiary); }
:focus-visible { outline: 2px solid var(--rm-mint); outline-offset: 2px; }