@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --font-ui: "Inter", sans-serif;
  --font-logo: "Bricolage Grotesque", sans-serif;
  --ink: #171a2b;
  --text: #41495d;
  --muted: #858d9f;
  --faint: #a1a8b7;
  --line: #e7e9ef;
  --surface: #ffffff;
  --canvas: #f8f9fc;
  --accent: #3478f6;
  --accent-soft: #eaf2ff;
  --success: #16b866;
  --danger: #dc3d42;
  --warning: #e8a000;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  color: var(--ink);
  font-family: var(--font-ui);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--canvas); color: var(--ink); }
body, button, input, select, textarea { font-family: var(--font-ui); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.brand, .brand * , .typed-logo, .typed-logo * {
  font-family: var(--font-logo);
  font-variant-ligatures: none;
  font-optical-sizing: auto;
  letter-spacing: normal;
}
.brand { color: var(--ink); font-size: 25px; font-weight: 700; line-height: 1; text-decoration: none; }
.brand > span, .typed-logo #typed-word span { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}