/* MTS tokens (dark theme) for Chamuka Labs Edge widgets. Source: MTS design system artifact. */
@font-face { font-family: "Clear Sans"; font-weight: 400; font-style: normal; src: url("fonts/ClearSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Clear Sans"; font-weight: 700; font-style: normal; src: url("fonts/ClearSans-Bold.woff2") format("woff2"); }

:root {
  --mts-surface-000: #000000;
  --mts-surface-100: #231f20;
  --mts-surface-200: #322e2f;
  --mts-ink: #ffffff;
  --mts-ink-muted: #d0d2d3;
  --mts-line: #8a8687;
  --mts-hairline: #4a4647;
  --mts-blue: #00adee;
  --mts-green: #22ff37;
  --mts-on-fill: #000000;
  --mts-danger: #ff6b6b;
  --mts-font: "Clear Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --surface-raised: color-mix(in srgb, var(--text-color) 9%, var(--bg-color));
  --ink-muted: color-mix(in srgb, var(--text-color) 72%, var(--bg-color));
  --line: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
  --danger: var(--mts-danger);
  --on-accent: var(--mts-on-fill);
  --text-color: var(--mts-ink);
  --accent-color: var(--mts-green);
  --bg-color: var(--mts-surface-100);
  --bg-opacity: 1;
  --scale: 1;
  --u: calc(1vmin * var(--scale));
  --space-1: calc(var(--u) * 0.6);
  --space-2: calc(var(--u) * 1.2);
  --space-3: calc(var(--u) * 1.8);
  --space-4: calc(var(--u) * 2.4);
  --radius-sm: calc(var(--u) * 0.9);
  --radius-md: calc(var(--u) * 1.8);
  --radius-pill: 9999px;
  --fs-caption: calc(var(--u) * 3);
  --fs-body: calc(var(--u) * 3.8);
  --fs-title: calc(var(--u) * 5);
  --fs-hero: calc(var(--u) * 12);
}

html[data-size="s"] { --scale: 1.3; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
body { font-family: var(--mts-font); color: var(--text-color); font-size: var(--fs-body); }
[hidden] { display: none !important; }

.edge-root {
  position: relative; box-sizing: border-box; width: 100%; height: 100%;
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
  background: color-mix(in srgb, var(--bg-color) calc(var(--bg-opacity) * 100%), transparent);
}
.edge-hero { font-size: var(--fs-hero); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.edge-title { font-size: var(--fs-title); font-weight: 700; }
.edge-caption { font-size: var(--fs-caption); color: var(--ink-muted); }
.edge-pill {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--accent-color); color: var(--on-accent); font-weight: 700;
}
.edge-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-3); }
.edge-state { display: grid; place-items: center; flex: 1; text-align: center; color: var(--ink-muted); }
.edge-state[data-state="error"] { color: var(--danger); }
html[data-tone="light"] { --danger: #c4001a; }
@supports (color: oklch(from red l c h)) {
  :root { --on-accent: oklch(from var(--accent-color) clamp(0, (0.62 - l) * 1000, 1) 0 0); }
}
.edge-touch { min-height: calc(var(--u) * 8); min-width: calc(var(--u) * 8); }