:root {
  --app-navy-950: #0b1f35;
  --app-navy-900: #11243d;
  --app-blue-700: #1d5f8f;
  --app-teal-600: #217b7d;
  --app-canvas: #f4f7fa;
  --app-surface: #ffffff;
  --app-text: #203244;
  --app-muted: #5f7184;
  --app-border: #d9e3ec;
  --app-primary: #176b76;
  --app-primary-hover: #10545e;
  --app-danger: #b42318;
  --app-warning: #a15c07;
  --app-radius-sm: 10px;
  --app-radius-md: 16px;
  --app-radius-lg: 22px;
  --app-shadow-sm: 0 8px 22px rgba(18, 40, 67, .07);
  --app-shadow-lg: 0 22px 48px rgba(13, 33, 57, .18);
  --app-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--app-canvas);
  color: var(--app-text);
  font-family: var(--app-font);
}

.app-page-hero {
  border-radius: var(--app-radius-lg);
  background: linear-gradient(135deg, var(--app-navy-900) 0%, var(--app-blue-700) 58%, var(--app-teal-600) 100%);
  box-shadow: var(--app-shadow-lg);
  color: #fff;
}

.app-surface {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}