/* Shared foundation for the public website and the ProcessPilot application. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono-latin-500.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --primary: #0063b1;
  --primary-deep: #004c89;
  --primary-soft: #e8f2fb;
  --primary-border: #bdd6eb;
  --on-primary: #fff;
  --ink: #24282d;
  --muted: #555e68;
  --surface: #fff;
  --surface-subtle: #fafbfc;
  --paper: #f7f8fa;
  --line: #dde2e7;
  --line-strong: #c6cfd8;
  --success: #146849;
  --success-soft: #ddf4e8;
  --warning: #806016;
  --warning-soft: #fff4d4;
  --danger: #912f36;
  --danger-soft: #feecee;
  --info: #52618a;
  --info-soft: #eef0f9;
  --radius: 18px;
  --radius-control: 8px;
  --shadow: 0 12px 40px rgba(24, 39, 54, .08);
  --focus-ring: 0 0 0 3px rgba(0, 99, 177, .16);
  /* Compatibility aliases for existing application components. */
  --brand: var(--primary);
  --mint: var(--primary-soft);
  --sky: var(--primary-soft);
  --amber: var(--warning);
  --red: var(--danger);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.5;
}
button, input, textarea, select { font: inherit; accent-color: var(--primary); }
button, summary { cursor: pointer; }
code, pre, kbd, samp { font-family: var(--font-mono); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
::selection { color: var(--primary-deep); background: var(--primary-soft); }

.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  flex: 0 0 auto;
  vertical-align: -.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 750 22px/1.2 var(--font-sans);
  letter-spacing: -.7px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--on-primary);
  background: var(--primary);
}
.brand-mark .ui-icon { width: 21px; height: 21px; }
.brand-accent { color: var(--primary); }

.button {
  min-height: 40px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: 650 14px/1.35 var(--font-sans);
  text-decoration: none;
}
.button.primary { color: var(--on-primary); background: var(--primary); }
.button.primary:hover { color: var(--on-primary); background: var(--primary-deep); text-decoration: none; }
.button.secondary { color: var(--primary-deep); border-color: var(--primary-border); background: var(--surface); }
.button.secondary:hover { background: var(--primary-soft); text-decoration: none; }
.button.danger { color: var(--danger); border-color: #efcdd0; background: var(--danger-soft); }
.button.wide { width: 100%; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button .ui-icon { width: 18px; height: 18px; }