:root {
  --wtcc-blue:#1F5FDB;
  --wtcc-blue-hover:#184DB5;
  --wtcc-soft-blue:#EAF1FF;
  --wtcc-teal:#0F766E;
  --wtcc-soft-teal:#E7F6F3;
  --wtcc-amber:#F4B740;
  --wtcc-soft-amber:#FFF5D9;
  --wtcc-coral:#C94B3C;
  --wtcc-soft-coral:#FDECE8;
  --wtcc-violet:#6D50C6;
  --wtcc-soft-violet:#F0ECFC;
  --wtcc-navy:#14213A;
  --wtcc-text:#172033;
  --wtcc-muted:#5E6A7D;
  --wtcc-surface:#F4F7FB;
  --wtcc-border:#DCE4EE;
  --wtcc-white:#FFFFFF;
  --wtcc-black:#000000;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:24px;
  --ui-space-6:32px;
  --ui-space-7:48px;
  --ui-space-8:64px;
  --ui-space-9:96px;
  --ui-space-10:128px;
  --ui-control-height:48px;
  --ui-control-height-compact:44px;
  --ui-control-padding-x:16px;
  --ui-control-gap:12px;
  --ui-button-height:48px;
  --ui-button-padding-x:16px;
  --ui-radius-control:var(--radius-sm,8px);
  --ui-radius-panel:var(--radius-md,12px);
  --ui-radius-card:var(--radius-md,12px);
  --ui-panel-padding:24px;
  --ui-focus-shadow:0 0 0 3px rgba(31,95,219,.22);
  --ui-transition-fast:180ms ease;
}

@media(max-width:767px) {
  :root { --ui-control-height:48px; }
}