/* Wrid.it — shared brand tokens and fonts (homepage and account pages) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-wght-italic.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/caveat-latin-500-normal.woff2) format('woff2'); }

:root {
  --ink: #141829;
  --text: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --paper: #ffffff;
  --paper-2: #f7f7fb;
  --accent: #3b2eeb;
  --accent-h: #3023c9;
  --accent-soft: #eeedfe;
  --night: #1e1b3a;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --radius: 10px;
  --shadow: 0 18px 50px -20px rgba(30, 27, 75, .35);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 23px/1 var(--sans); letter-spacing: .01em; }
.brand img { height: 30px; width: auto; }
.brand em { font-style: normal; color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(59, 46, 235, .7); }
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost { background: #fff; color: var(--ink); border-color: #d1d5db; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }