:root {
  /* Colour tokens */
  --pt-color-primary-700: #1f3f67;
  --pt-color-primary-600: #29557f;
  --pt-color-primary-500: #356995;
  --pt-color-secondary-600: #4f6279;
  --pt-color-secondary-500: #637892;
  --pt-color-accent-500: #3a7f85;

  --pt-color-bg-canvas: #f2f5f9;
  --pt-color-bg-surface: #ffffff;
  --pt-color-bg-surface-alt: #f7f9fc;
  --pt-color-bg-assistant: #f3f7fb;
  --pt-color-border-subtle: #d5dee8;
  --pt-color-border-strong: #bac9d9;
  --pt-color-text-primary: #1e2f42;
  --pt-color-text-secondary: #4f6277;
  --pt-color-text-micro: #64768b;

  --pt-color-status-success: #2e7d5a;
  --pt-color-status-warning: #9a6a2c;
  --pt-color-status-info: #3a6691;
  --pt-color-status-critical: #965b5d;

  --pt-alert-critical-bg: #fbf3f3;
  --pt-alert-critical-border: #e4c9cb;
  --pt-alert-high-bg: #f9f4e8;
  --pt-alert-high-border: #e4cfab;
  --pt-alert-medium-bg: #f2f6fb;
  --pt-alert-medium-border: #c8d8ea;
  --pt-alert-low-bg: #eff5fb;
  --pt-alert-low-border: #c9d9ea;

  /* Typography tokens */
  --pt-type-page-title: clamp(1.6rem, 2.1vw, 1.95rem);
  --pt-type-section-title: 1.1rem;
  --pt-type-card-title: 1rem;
  --pt-type-body: 1rem;
  --pt-type-micro: 0.82rem;
  --pt-type-tooltip: 0.82rem;

  /* Spacing tokens */
  --pt-space-xs: 0.25rem;
  --pt-space-s: 0.5rem;
  --pt-space-m: 0.9rem;
  --pt-space-l: 1.25rem;
  --pt-space-xl: 1.75rem;

  /* Shape and motion tokens */
  --pt-radius-sm: 10px;
  --pt-radius-md: 14px;
  --pt-radius-lg: 18px;
  --pt-shadow-card: 0 6px 20px rgba(21, 42, 72, 0.08);
  --pt-shadow-elevated: 0 12px 26px rgba(21, 42, 72, 0.14);
  --pt-motion-fast: 140ms;
  --pt-motion-normal: 180ms;
  --pt-motion-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Focus tokens */
  --pt-focus-ring: #c3a04e;

  /* Backwards-compatible aliases */
  --nhs-blue: var(--pt-color-primary-600);
  --nhs-blue-dark: var(--pt-color-primary-700);
  --nhs-blue-soft: #e8eef6;
  --ink: var(--pt-color-text-primary);
  --text-muted: var(--pt-color-text-secondary);
  --surface: var(--pt-color-bg-surface);
  --surface-alt: var(--pt-color-bg-canvas);
  --border: var(--pt-color-border-subtle);
  --focus: var(--pt-focus-ring);
  --radius: var(--pt-radius-md);
  --shadow-soft: var(--pt-shadow-card);
}

body {
  background: var(--pt-color-bg-canvas);
  color: var(--pt-color-text-primary);
}

.pt-card {
  background: var(--pt-color-bg-surface);
  border: 1px solid var(--pt-color-border-subtle);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-card);
  padding: var(--pt-space-l);
  transition: transform var(--pt-motion-fast) var(--pt-motion-standard), box-shadow var(--pt-motion-normal) var(--pt-motion-standard), border-color var(--pt-motion-normal) var(--pt-motion-standard);
}

.pt-card:hover,
.pt-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-elevated);
  border-color: var(--pt-color-border-strong);
}

.pt-assistant-panel {
  background: var(--pt-color-bg-assistant);
  border: 1px solid var(--pt-color-border-strong);
}

.pt-alert {
  border-left: 4px solid var(--pt-alert-low-border);
  background: var(--pt-alert-low-bg);
}

.pt-alert--critical { border-left-color: var(--pt-color-status-critical); background: var(--pt-alert-critical-bg); }
.pt-alert--high { border-left-color: var(--pt-color-status-warning); background: var(--pt-alert-high-bg); }
.pt-alert--medium { border-left-color: var(--pt-color-status-info); background: var(--pt-alert-medium-bg); }
.pt-alert--low { border-left-color: #7e9bbb; background: var(--pt-alert-low-bg); }

.pt-form-group {
  display: grid;
  gap: var(--pt-space-s);
  margin-bottom: var(--pt-space-m);
}

label,
.form-label {
  color: var(--pt-color-text-primary);
  font-weight: 600;
}

input,
select,
textarea,
.form-control {
  border: 1px solid var(--pt-color-border-subtle);
  border-radius: var(--pt-radius-sm);
  padding: 0.65rem 0.72rem;
  background: var(--pt-color-bg-surface);
  color: var(--pt-color-text-primary);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--pt-color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-color-primary-500) 22%, transparent);
  outline: none;
}

.form-help,
.helptext {
  color: var(--pt-color-text-secondary);
  font-size: var(--pt-type-micro);
}

.form-error,
.errorlist {
  color: var(--pt-color-status-critical);
  font-size: var(--pt-type-micro);
}