/* ShoutCal shared primitives — identity font, reset, reusable components.
   Depends on tokens.css and fonts/ (loaded relative to styles/). */

@font-face { font-family: "FreeSerif"; src: url("../fonts/Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FreeSerif"; src: url("../fonts/Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FreeSerif"; src: url("../fonts/Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "FreeSerif"; src: url("../fonts/BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

/* identity wordmark */
.brand {
  font-family: var(--font-identity); font-style: italic; font-weight: 700;
  font-size: 17px; letter-spacing: -0.01em;
  text-decoration: none;
}

/* pill button */
.btn {
  display: inline-block; padding: 11px 26px; border-radius: 999px; font-size: 14.5px;
  font-weight: 600; background: var(--accent); color: #fff; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: .15s; }
.switch i::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::before { transform: translateX(14px); }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--muted);
}
.chip:hover { border-color: var(--faint); color: var(--fg); }
.chip .cdot { width: 7px; height: 7px; border-radius: 50%; }