/* Shared visual language, derived from the Kreatis logo. */
:root {
  --primary: #2157ce;
  --primary-hover: #1742a3;
  --secondary: #101b38;
  --accent: #bfdbfa;
  --background: #f7f8fa;
  --surface: #fff;
  --paper: #f6f4ef;
  --text: #182238;
  --muted: #596578;
  --border: #dce1e8;
  --success: #216345;
  --warning: #885208;
  --error: #ac2d3e;
  --info: #2157ce;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 8px 30px rgb(16 27 56 / 6%);
  --transition: 180ms ease;
  --font-body: 'Manrope', Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 100px; }
body { margin: 0; font: 16px/1.65 var(--font-body); color: var(--text); background: var(--background); }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
a { color: var(--primary); text-underline-offset: 4px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
input, select, textarea { accent-color: var(--primary); }
button:disabled { opacity: .65; cursor: wait; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; z-index: 10000; background: var(--secondary); color: white; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}