/* Switchy site: tokens, reset, shared type. */

/* Open Runde (OFL, by Laurids Kern), subset to Latin. optional: never swap late, so nothing shifts */
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/open-runde-regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/open-runde-medium-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("../fonts/open-runde-semibold-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/open-runde-bold-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --font: "Open Runde", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --paper: #f5f3ee;
  --ink: #111214;
  --muted: #5a5e66;
  --card: #ffffff;
  --chip: #efece6;
  --line: rgba(17, 18, 20, 0.08);
  --accent: #2f7bff;
  --accent-ink: #0d3fae;
  --link: #1f5fd6;
  --violet: #3b2fb8;

  --sky: #dce8ff;   --sky-ink: #1f4a9e;
  --mint: #dcf1e3;  --mint-ink: #2f6b45;
  --butter: #faefc7; --butter-ink: #6b5300;
  --lilac: #eae3fa; --lilac-ink: #4e3a86;
  --blush: #fbe3da; --blush-ink: #8a3a1f;

  --green: #1f9d55;
  --amber: #e0a100;
  --red: #d93b3b;

  --radius-lg: 32px;
  --wrap: 1160px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e0f12;
  --ink: #f2f3f5;
  --muted: #a3a8b1;
  --card: #17181c;
  --chip: #22242a;
  --line: rgba(255, 255, 255, 0.08);
  --accent-ink: #9dbdff;
  --link: #8fb4ff;
  --violet: #c9bcff;

  --sky: #18233d;   --sky-ink: #a9c4ff;
  --mint: #13281b;  --mint-ink: #8fd6a8;
  --butter: #2a2413; --butter-ink: #f0d27a;
  --lilac: #211b33; --lilac-ink: #c6b5f5;
  --blush: #2e1b16; --blush-ink: #f2ad95;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
  overflow-x: hidden;
}

img, svg { display: block; }
button { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }

/* The second line of a headline, and the small label above one */
.accent { color: var(--violet); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--violet); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s;
  will-change: transform;
}
.btn:hover { text-decoration: none; }
.btn svg { flex: none; }
.btn--dark { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px rgba(17, 18, 20, 0.22); }
.btn--light { background: #fff; color: #111214; box-shadow: 0 12px 30px rgba(5, 15, 50, 0.25); }
.btn--ghost { color: inherit; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }