@font-face { font-family: 'Inter Var'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Manrope Var'; src: url('../fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Source Serif Var'; src: url('../fonts/source-serif-4.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/plex-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/plex-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/plex-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/plex-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Signature'; src: url('../fonts/caveat-600.woff2') format('woff2'); font-weight: 600; font-display: block; }

:root {
  --ui-font: 'Inter Var', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink: #0f1729; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e6e9ef; --line-2: #d5dae3; --canvas: #eceef2;
  --brand: #1F4FD8; --brand-ink: #1F4FD8; --brand-50: #f4f6fd; --brand-100: #e9edfb; --brand-200: #d2dbf7; --brand-700: #183fae; --on-brand: #fff;
  --ok: #0f7a4c; --ok-50: #ecf8f2; --ok-200: #b8e5cf;
  --radius: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ui-font); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons shared by client and editor */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 500 13.5px/1 var(--ui-font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { background: #f7f8fa; border-color: #c7cdd8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-200); border-color: var(--brand); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(15,23,41,.12), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-brand:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: rgba(15,23,41,.05); border-color: transparent; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Techo accent: green buttons with deep-purple text (6.3:1 contrast) */
.btn-brand { background: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); color: var(--on-accent, var(--on-brand)); font-weight: 650; }
.btn-brand:hover { background: var(--accent-700, var(--brand-700)); border-color: var(--accent-700, var(--brand-700)); }