watchtower.css

/* ============================================================
   WATCHTOWER DESIGN LANGUAGE
   The shared design system for the …Watch product family.
   v1.0  ·  Foundations + Components
   ============================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* — Brand (azure) — the family identity. Never used for status. */
  --wt-brand-50:  oklch(0.972 0.018 256);
  --wt-brand-100: oklch(0.940 0.040 256);
  --wt-brand-200: oklch(0.885 0.070 256);
  --wt-brand-300: oklch(0.800 0.110 257);
  --wt-brand-400: oklch(0.705 0.155 258);
  --wt-brand-500: oklch(0.620 0.190 259);
  --wt-brand-600: oklch(0.552 0.205 262);
  --wt-brand-700: oklch(0.482 0.182 264);
  --wt-brand-800: oklch(0.405 0.142 265);
  --wt-brand-900: oklch(0.330 0.100 266);

  /* — Neutrals (cool slate) — */
  --wt-n-0:   #ffffff;
  --wt-n-50:  oklch(0.985 0.003 256);
  --wt-n-100: oklch(0.968 0.005 256);
  --wt-n-150: oklch(0.952 0.006 256);
  --wt-n-200: oklch(0.927 0.008 256);
  --wt-n-300: oklch(0.882 0.011 256);
  --wt-n-400: oklch(0.730 0.016 256);
  --wt-n-500: oklch(0.595 0.019 256);
  --wt-n-600: oklch(0.495 0.021 257);
  --wt-n-700: oklch(0.405 0.022 258);
  --wt-n-800: oklch(0.300 0.022 259);
  --wt-n-900: oklch(0.225 0.021 260);
  --wt-n-950: oklch(0.165 0.020 261);

  /* — Status / semantic — */
  --wt-up-50:   oklch(0.962 0.035 152);
  --wt-up-100:  oklch(0.925 0.065 152);
  --wt-up-500:  oklch(0.640 0.155 152);
  --wt-up-600:  oklch(0.570 0.150 153);
  --wt-up-700:  oklch(0.480 0.130 154);

  --wt-warn-50:  oklch(0.967 0.040 85);
  --wt-warn-100: oklch(0.930 0.075 82);
  --wt-warn-500: oklch(0.760 0.150 73);
  --wt-warn-600: oklch(0.680 0.155 65);
  --wt-warn-700: oklch(0.560 0.135 58);

  --wt-down-50:  oklch(0.962 0.028 25);
  --wt-down-100: oklch(0.918 0.055 25);
  --wt-down-500: oklch(0.620 0.215 26);
  --wt-down-600: oklch(0.560 0.225 27);
  --wt-down-700: oklch(0.485 0.200 28);

  --wt-info-50:  var(--wt-brand-50);
  --wt-info-500: var(--wt-brand-500);
  --wt-info-600: var(--wt-brand-600);

  /* — Accent (teal) — for data viz & secondary emphasis — */
  --wt-teal-100: oklch(0.930 0.050 200);
  --wt-teal-500: oklch(0.720 0.120 205);
  --wt-teal-600: oklch(0.640 0.115 207);

  /* — Categorical data-viz ramp — */
  --wt-viz-1: oklch(0.620 0.190 259); /* brand blue   */
  --wt-viz-2: oklch(0.720 0.120 205); /* teal         */
  --wt-viz-3: oklch(0.640 0.155 152); /* green        */
  --wt-viz-4: oklch(0.760 0.150 73);  /* amber        */
  --wt-viz-5: oklch(0.640 0.180 320); /* magenta      */
  --wt-viz-6: oklch(0.600 0.160 290); /* violet       */
  --wt-viz-7: oklch(0.660 0.150 35);  /* coral        */

  /* — Semantic surface roles (light theme) — */
  --wt-bg:          var(--wt-n-100);
  --wt-bg-grid:     oklch(0.952 0.006 256);
  --wt-surface:     var(--wt-n-0);
  --wt-surface-2:   var(--wt-n-50);
  --wt-surface-3:   var(--wt-n-100);
  --wt-border:      var(--wt-n-200);
  --wt-border-strong: var(--wt-n-300);
  --wt-text:        var(--wt-n-900);
  --wt-text-muted:  var(--wt-n-600);
  --wt-text-subtle: var(--wt-n-500);
  --wt-text-faint:  var(--wt-n-400);
  --wt-text-on-brand: #ffffff;

  /* — Console / dark surfaces (used inside light app for terminals) — */
  --wt-console-bg:     oklch(0.185 0.018 260);
  --wt-console-bg-2:   oklch(0.225 0.020 260);
  --wt-console-border: oklch(0.300 0.022 260);
  --wt-console-text:   oklch(0.880 0.012 256);
  --wt-console-muted:  oklch(0.620 0.018 256);
  --wt-console-prompt: var(--wt-up-500);
  --wt-console-accent: oklch(0.760 0.120 256);

  /* — Typography — */
  --wt-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  --wt-text-xs:   12px;
  --wt-text-sm:   13px;
  --wt-text-base: 15px;
  --wt-text-md:   17px;
  --wt-text-lg:   20px;
  --wt-text-xl:   24px;
  --wt-text-2xl:  30px;
  --wt-text-3xl:  40px;
  --wt-text-4xl:  54px;

  /* — Spacing (4px base) — */
  --wt-1: 4px;   --wt-2: 8px;   --wt-3: 12px;  --wt-4: 16px;
  --wt-5: 20px;  --wt-6: 24px;  --wt-8: 32px;  --wt-10: 40px;
  --wt-12: 48px; --wt-16: 64px; --wt-20: 80px;

  /* — Radius — */
  --wt-r-sm: 6px;
  --wt-r-md: 9px;
  --wt-r-lg: 14px;
  --wt-r-xl: 18px;
  --wt-r-2xl: 24px;
  --wt-r-pill: 999px;
  --wt-r-squircle: 28%;

  /* — Elevation (restrained; hairline-first) — */
  --wt-shadow-xs: 0 1px 2px oklch(0.30 0.02 258 / 0.06);
  --wt-shadow-sm: 0 1px 2px oklch(0.30 0.02 258 / 0.05), 0 2px 6px oklch(0.30 0.02 258 / 0.05);
  --wt-shadow-md: 0 2px 4px oklch(0.30 0.02 258 / 0.05), 0 8px 20px oklch(0.30 0.02 258 / 0.08);
  --wt-shadow-lg: 0 8px 16px oklch(0.30 0.02 258 / 0.08), 0 24px 48px oklch(0.30 0.02 258 / 0.12);
  --wt-ring-brand: 0 0 0 3px oklch(0.620 0.190 259 / 0.18);

  /* — Motion — */
  --wt-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --wt-dur: 160ms;
}

/* ----------------------------------------------------------------
   2. BASE / RESET (scoped helpers — non-invasive)
   ---------------------------------------------------------------- */
.wt-mono { font-family: var(--wt-font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.wt-tnum { font-variant-numeric: tabular-nums; }

/* — Eyebrow label: the family signature — */
.wt-eyebrow {
  font-family: var(--wt-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wt-text-subtle);
  line-height: 1;
}

/* ----------------------------------------------------------------
   3. COLOR SWATCHES (doc helpers)
   ---------------------------------------------------------------- */
.wt-swatch-grid { display: grid; gap: var(--wt-3); }
.wt-swatch {
  border-radius: var(--wt-r-md);
  overflow: hidden;
  border: 1px solid var(--wt-border);
  background: var(--wt-surface);
  box-shadow: var(--wt-shadow-xs);
}
.wt-swatch__chip { height: 64px; }
.wt-swatch__meta { padding: 8px 10px 10px; }
.wt-swatch__name {
  font-family: var(--wt-font-mono);
  font-size: 11.5px; font-weight: 600; color: var(--wt-text);
  display: block; margin-bottom: 2px;
}
.wt-swatch__val {
  font-family: var(--wt-font-mono);
  font-size: 10.5px; color: var(--wt-text-faint); letter-spacing: -0.01em;
}

/* ================================================================
   4. COMPONENTS
   ================================================================ */

/* — App-icon squircle (the family lockup container) — */
.wt-appicon {
  --ai-size: 40px;
  width: var(--ai-size); height: var(--ai-size);
  border-radius: var(--wt-r-squircle);
  display: grid; place-items: center;
  color: #fff; flex: none;
  background:
    linear-gradient(160deg, oklch(1 0 0 / 0.22), oklch(1 0 0 / 0) 55%),
    linear-gradient(160deg, var(--ai-from, var(--wt-brand-400)), var(--ai-to, var(--wt-brand-600)));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    inset 0 -1px 0 oklch(0 0 0 / 0.12),
    0 1px 2px oklch(0.30 0.02 258 / 0.18);
}
.wt-appicon svg { width: 56%; height: 56%; display: block; }

/* — Status pill (semantic) — */
.wt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wt-font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px 3px 8px;
  border-radius: var(--wt-r-pill);
  border: 1px solid transparent;
  line-height: 1.2; white-space: nowrap;
}
.wt-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wt-pill--up    { background: var(--wt-up-50);   color: var(--wt-up-700);   border-color: oklch(0.640 0.155 152 / 0.25); }
.wt-pill--up    .wt-pill__dot { background: var(--wt-up-500); box-shadow: 0 0 0 3px oklch(0.640 0.155 152 / 0.18); }
.wt-pill--warn  { background: var(--wt-warn-50); color: var(--wt-warn-700); border-color: oklch(0.760 0.150 73 / 0.30); }
.wt-pill--warn  .wt-pill__dot { background: var(--wt-warn-500); box-shadow: 0 0 0 3px oklch(0.760 0.150 73 / 0.20); }
.wt-pill--down  { background: var(--wt-down-50); color: var(--wt-down-700); border-color: oklch(0.620 0.215 26 / 0.25); }
.wt-pill--down  .wt-pill__dot { background: var(--wt-down-500); box-shadow: 0 0 0 3px oklch(0.620 0.215 26 / 0.18); }
.wt-pill--info  { background: var(--wt-brand-50); color: var(--wt-brand-700); border-color: oklch(0.620 0.190 259 / 0.22); }
.wt-pill--info  .wt-pill__dot { background: var(--wt-brand-500); }
.wt-pill--muted { background: var(--wt-n-100); color: var(--wt-n-600); border-color: var(--wt-border); }
.wt-pill--muted .wt-pill__dot { background: var(--wt-n-400); }
.wt-pill--solid-up   { background: var(--wt-up-500);   color: #fff; }
.wt-pill--solid-down { background: var(--wt-down-500); color: #fff; }

/* — Buttons — */
.wt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--wt-font-sans);
  font-size: var(--wt-text-sm); font-weight: 600;
  padding: 8px 14px; border-radius: var(--wt-r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--wt-dur) var(--wt-ease), box-shadow var(--wt-dur) var(--wt-ease), border-color var(--wt-dur) var(--wt-ease);
  line-height: 1; white-space: nowrap;
}
.wt-btn svg { width: 15px; height: 15px; }
.wt-btn--primary { background: var(--wt-brand-600); color: #fff; box-shadow: var(--wt-shadow-xs), inset 0 1px 0 oklch(1 0 0 / 0.18); }
.wt-btn--primary:hover { background: var(--wt-brand-700); }
.wt-btn--secondary { background: var(--wt-surface); color: var(--wt-text); border-color: var(--wt-border-strong); box-shadow: var(--wt-shadow-xs); }
.wt-btn--secondary:hover { background: var(--wt-surface-2); border-color: var(--wt-n-400); }
.wt-btn--ghost { background: transparent; color: var(--wt-text-muted); }
.wt-btn--ghost:hover { background: var(--wt-n-100); color: var(--wt-text); }
.wt-btn--danger { background: var(--wt-down-600); color: #fff; }
.wt-btn--sm { padding: 5px 10px; font-size: var(--wt-text-xs); }

/* — Tag chip — */
.wt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--wt-font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--wt-text-muted);
  padding: 3px 9px; border-radius: var(--wt-r-sm);
  background: var(--wt-surface-2); border: 1px solid var(--wt-border);
}
.wt-chip::before { content: "#"; color: var(--wt-text-faint); }
.wt-chip--plain::before { content: none; }

/* — Segmented control — */
.wt-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--wt-n-100); border: 1px solid var(--wt-border); border-radius: var(--wt-r-md); }
.wt-seg button {
  font-family: var(--wt-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wt-text-subtle);
  padding: 4px 10px; border: 0; background: transparent; border-radius: 6px; cursor: pointer;
}
.wt-seg button[aria-selected="true"] { background: var(--wt-surface); color: var(--wt-brand-700); box-shadow: var(--wt-shadow-xs); }

/* — Card — */
.wt-card {
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-r-lg);
  box-shadow: var(--wt-shadow-sm);
}
.wt-card--pad { padding: var(--wt-5); }

/* — Metric tile — */
.wt-tile {
  background: var(--wt-surface); border: 1px solid var(--wt-border);
  border-radius: var(--wt-r-lg); padding: 14px 16px; box-shadow: var(--wt-shadow-xs);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.wt-tile__head { display: flex; align-items: center; gap: 8px; }
.wt-tile__icon {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: var(--wt-brand-50); color: var(--wt-brand-600);
}
.wt-tile__icon svg { width: 15px; height: 15px; }
.wt-tile__label { font-family: var(--wt-font-sans); font-size: 12.5px; font-weight: 500; color: var(--wt-text-muted); }
.wt-tile__value { font-family: var(--wt-font-mono); font-size: 26px; font-weight: 600; color: var(--wt-text); letter-spacing: -0.02em; line-height: 1; }
.wt-tile__value sup, .wt-tile__unit { font-size: 0.55em; color: var(--wt-text-subtle); font-weight: 500; }
.wt-tile__foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wt-text-subtle); }
.wt-tile--up    .wt-tile__icon { background: var(--wt-up-50);   color: var(--wt-up-600); }
.wt-tile--warn  .wt-tile__icon { background: var(--wt-warn-50); color: var(--wt-warn-600); }
.wt-tile--down  .wt-tile__icon { background: var(--wt-down-50); color: var(--wt-down-600); }
.wt-tile--teal  .wt-tile__icon { background: var(--wt-teal-100); color: var(--wt-teal-600); }
.wt-tile__value--up   { color: var(--wt-up-600); }
.wt-tile__value--warn { color: var(--wt-warn-600); }
.wt-tile__value--down { color: var(--wt-down-600); }
.wt-tile__value--brand{ color: var(--wt-brand-600); }

.wt-trend { display: inline-flex; align-items: center; gap: 3px; font-family: var(--wt-font-mono); font-size: 11.5px; font-weight: 600; }
.wt-trend--up   { color: var(--wt-up-600); }
.wt-trend--down { color: var(--wt-down-600); }

/* — Meter / temperature bar — */
.wt-meter { height: 5px; border-radius: var(--wt-r-pill); background: var(--wt-n-150); overflow: hidden; }
.wt-meter__fill { height: 100%; border-radius: inherit; background: var(--wt-brand-500); }
.wt-meter__fill--temp {
  background: linear-gradient(90deg, var(--wt-teal-500), var(--wt-up-500) 35%, var(--wt-warn-500) 72%, var(--wt-down-500));
}

/* — Status-history strip — */
.wt-history { display: flex; gap: 2px; align-items: stretch; }
.wt-history span { flex: 1; height: 26px; border-radius: 2px; background: var(--wt-up-500); }
.wt-history span.is-down { background: var(--wt-down-500); }
.wt-history span.is-warn { background: var(--wt-warn-500); }
.wt-history span.is-none { background: var(--wt-n-200); }

/* — Health ring — */
.wt-ring { --val: 96; --ring: var(--wt-up-500); position: relative; width: 64px; height: 64px; flex: none; }
.wt-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.wt-ring__track { fill: none; stroke: var(--wt-n-150); stroke-width: 6; }
.wt-ring__val { fill: none; stroke: var(--ring); stroke-width: 6; stroke-linecap: round; }
.wt-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--wt-font-mono); font-weight: 600; font-size: 19px; color: var(--wt-text); }

/* — Console block — */
.wt-console {
  background: var(--wt-console-bg); border: 1px solid var(--wt-console-border);
  border-radius: var(--wt-r-lg); overflow: hidden;
  font-family: var(--wt-font-mono); font-size: 12.5px; line-height: 1.65;
  color: var(--wt-console-text);
}
.wt-console__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: var(--wt-console-bg-2);
  border-bottom: 1px solid var(--wt-console-border);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wt-console-accent); font-weight: 600;
}
.wt-console__body { padding: 14px; }
.wt-console__row { display: flex; gap: 16px; white-space: pre; }
.wt-console .c-prompt { color: var(--wt-console-prompt); }
.wt-console .c-muted  { color: var(--wt-console-muted); }
.wt-console .c-accent { color: var(--wt-console-accent); }
.wt-console .c-up     { color: var(--wt-up-500); }

/* — App bar (family chrome) — */
.wt-appbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; background: var(--wt-surface);
  border-bottom: 1px solid var(--wt-border);
}
.wt-appbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.wt-appbar__switch { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* — Section frame (doc stage) — */
.wt-stage {
  background:
    linear-gradient(var(--wt-bg-grid) 1px, transparent 1px) 0 0 / 100% 22px,
    var(--wt-surface-2);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-r-lg);
  padding: var(--wt-6);
}

/* — Form controls — */
.wt-field { display: flex; flex-direction: column; gap: 6px; }
.wt-label { font-size: 13px; font-weight: 600; color: var(--wt-text); }
.wt-hint { font-size: 12px; color: var(--wt-text-subtle); line-height: 1.45; }
.wt-input, .wt-select, .wt-textarea {
  font-family: var(--wt-font-sans); font-size: 14px; color: var(--wt-text);
  background: var(--wt-surface); border: 1px solid var(--wt-border-strong);
  border-radius: var(--wt-r-md); padding: 9px 12px; width: 100%;
  transition: border-color var(--wt-dur) var(--wt-ease), box-shadow var(--wt-dur) var(--wt-ease);
}
.wt-input:focus, .wt-select:focus, .wt-textarea:focus { outline: none; border-color: var(--wt-brand-500); box-shadow: var(--wt-ring-brand); }
.wt-input::placeholder { color: var(--wt-text-faint); }
.wt-input--mono { font-family: var(--wt-font-mono); font-size: 13px; }
.wt-select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* — Toggle switch — */
.wt-switch { position: relative; display: inline-flex; width: 40px; height: 22px; flex: none; cursor: pointer; }
.wt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wt-switch__track { position: absolute; inset: 0; background: var(--wt-n-300); border-radius: var(--wt-r-pill); transition: background var(--wt-dur) var(--wt-ease); }
.wt-switch__track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: var(--wt-shadow-xs); transition: transform var(--wt-dur) var(--wt-ease); }
.wt-switch input:checked ~ .wt-switch__track { background: var(--wt-brand-600); }
.wt-switch input:checked ~ .wt-switch__track::before { transform: translateX(18px); }

/* — Dashboard panel — */
.wt-panel { background: var(--wt-surface); border: 1px solid var(--wt-border); border-radius: var(--wt-r-lg); box-shadow: var(--wt-shadow-sm); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.wt-panel__head { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--wt-border); }
.wt-panel__title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--wt-text); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-panel__src { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--wt-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wt-text-faint); }
.wt-panel__menu { color: var(--wt-text-faint); display: inline-flex; cursor: pointer; padding: 2px; border-radius: 4px; }
.wt-panel__menu:hover { background: var(--wt-n-100); color: var(--wt-text-muted); }
.wt-panel__body { padding: 14px; flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ================================================================
   5. DARK THEME  ·  [data-theme="dark"]
   Demonstrated by the Watchtower hub. Re-maps roles + semantic
   tints so every component above adapts without markup changes.
   ================================================================ */
[data-theme="dark"] {
  /* roles */
  --wt-bg:            oklch(0.170 0.012 262);
  --wt-bg-grid:       oklch(0.225 0.014 262);
  --wt-surface:       oklch(0.213 0.015 262);
  --wt-surface-2:     oklch(0.253 0.016 262);
  --wt-surface-3:     oklch(0.292 0.016 262);
  --wt-border:        oklch(0.310 0.015 262);
  --wt-border-strong: oklch(0.400 0.018 262);
  --wt-text:          oklch(0.965 0.004 262);
  --wt-text-muted:    oklch(0.745 0.012 262);
  --wt-text-subtle:   oklch(0.625 0.014 262);
  --wt-text-faint:    oklch(0.505 0.014 262);

  /* neutral steps used as fills/tracks/borders */
  --wt-n-100: oklch(0.262 0.015 262);
  --wt-n-150: oklch(0.300 0.015 262);
  --wt-n-200: oklch(0.320 0.015 262);
  --wt-n-300: oklch(0.400 0.018 262);

  /* semantic tints (panel/pill/tile backgrounds) */
  --wt-brand-50:  oklch(0.300 0.075 262);
  --wt-up-50:     oklch(0.310 0.055 152);
  --wt-warn-50:   oklch(0.330 0.060 75);
  --wt-down-50:   oklch(0.320 0.070 25);
  --wt-teal-100:  oklch(0.315 0.055 205);
  --wt-brand-100: oklch(0.345 0.085 262);

  /* strong values + pill text, lifted for contrast on dark */
  --wt-brand-600: oklch(0.640 0.185 262);
  --wt-brand-700: oklch(0.820 0.110 262);
  --wt-up-600:    oklch(0.730 0.160 152);
  --wt-up-700:    oklch(0.840 0.140 152);
  --wt-warn-600:  oklch(0.800 0.150 78);
  --wt-warn-700:  oklch(0.850 0.130 82);
  --wt-down-600:  oklch(0.680 0.205 26);
  --wt-down-700:  oklch(0.800 0.150 25);
  --wt-teal-600:  oklch(0.760 0.110 205);

  /* elevation: lean on darker shadow */
  --wt-shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --wt-shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.28);
  --wt-shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.40);
  --wt-shadow-lg: 0 10px 24px rgba(0,0,0,0.45), 0 28px 56px rgba(0,0,0,0.55);
}