/* tokens.css — the Phase 0 token NAMES, now aliases of Reception.

   WHAT THIS FILE WAS. The Phase 0 token set: a cool grey ramp (#0A0A0A,
   #52525B, #EAEAEA) and a Tailwind-default semantic palette (#16A34A, #B45309,
   #DC2626, #1D4ED8). `sadaa.css` then defined the Reception palette — warm
   ink, warm rules, AA-measured semantic tones — and every Reception surface
   moved onto it. These names did not move with them, and they still had
   live readers: `SadaaStatus.Badge` and the usage meter read `--success`,
   `--warning`, `--danger` and `--text-secondary`, so every status pill in
   Usage, Billing, Bookings and Call detail was painted from a second palette
   that DESIGN.md measured below AA (3.15:1 and 4.41:1), beside chips painted
   from the first.

   NOW. Each name resolves to the Reception token that does the same job, so
   every reader converges without being edited, and there is one palette in
   the product. The names are kept rather than deleted because a deleted
   custom property fails silently. `sadaa.css` owns the values; nothing new
   should read these names — read the Reception tokens directly.

   Custom properties resolve when they are USED, so aliasing to tokens that
   `sadaa.css` defines after this file is loaded is correct. */
:root {
  /* surfaces */
  --bg-app: var(--surface);
  --bg-subtle: var(--surface-warm);
  --bg-inset: var(--surface-sunk);
  /* borders */
  --border: var(--rule);
  --border-strong: var(--rule-2);
  /* text */
  --text: var(--ink);
  --text-secondary: var(--muted);
  --text-tertiary: var(--faint);
  /* the one accent — echo. `--accent` was the retired violet #7C3AED. */
  --accent: var(--echo);
  --accent-subtle: var(--echo-soft);
  /* semantic status — Reception's AA-measured tones. `--info` itself is
     defined by sadaa.css. */
  --success: var(--ok);      --success-bg: var(--ok-soft);
  --warning: var(--warn);    --warning-bg: var(--warn-soft);
  /* `--danger` itself is the console prototype's red fill now (echo-tokens.css,
     loaded after this file), so the alias that USED to be here would lose; the one
     reader, SadaaStatus.Badge, reads --crit directly (status-map.jsx). */
  --danger-bg: var(--crit-soft);
  --info-bg: var(--info-soft);
  /* radii */
  --radius-control: var(--r-1);   /* inputs, buttons */
  --radius-card: var(--r-2);      /* cards, drawers */
  --radius-pill: var(--r-full);   /* avatars and status dots only */
  /* elevation — Reception has two levels */
  --shadow-card: var(--sh-1);
  --shadow-overlay: var(--sh-2);
  /* spacing rhythm (4px grid). Not a Reception token; kept for any reader. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  /* focus ring — the field ring `.sd-input:focus-visible` draws */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);
}

/* `.sd-card` is authored in sadaa.css (CARD), which loads after this file and
   has always won; the Phase 0 copy that stood here was dead weight that
   disagreed with it on colour and border. */

/* `:focus-visible`, not `:focus`: a ring that appears on every mouse click is
   the reason people remove focus rings. */
.sd-focus:focus { outline: none; }
.sd-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--echo);
}

/* `SadaaStatus.Badge`. Wave 6-Lite: a pill, as the console prototype draws every status
   (it was DESIGN.md's "6px rectangle, never a pill"); still the same geometry as
   `.sd-chip` — the same geometry as `.sd-chip`, so a status reads the same
   whether a page drew it with the chip or with the badge. Its colours come
   from the aliased semantic tokens above. */
.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}