/* tsquare.dev: colors from the logo. Wireframes on the page stay grayscale. */

/* Inter, served from this site (no third-party font requests). */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/inter-latin-800-normal.woff2) format("woff2"); }

:root {
  --navy: #032d7b;        /* logo outlines: headings, text accents */
  --blue: #3b99fb;        /* logo's lit face: buttons, links */
  --blue-ink: #1f6fd6;    /* blue dark enough for text on white */
  --sky: #addffd;         /* logo tile: backgrounds */
  --mist: #c6e7fd;        /* logo highlight: soft fills */
  --paper: #ffffff;
  --page: #f5faff;
  --ink: #0d1b3a;
  --text: #33405a;
  --muted: #66718a;
  --line: #d6e6f7;
  --code-bg: #0b2155;
  --code-ink: #e3efff;
  --radius: 14px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.6 var(--sans); }
a { color: var(--blue-ink); }
img { max-width: 100%; }
code { font: 0.9em var(--mono); background: var(--mist); color: var(--navy); padding: 0.1em 0.35em; border-radius: 5px; }
pre code { background: none; color: inherit; padding: 0; font-size: 13px; }
pre { background: var(--code-bg); color: var(--code-ink); padding: 16px 18px; border-radius: 10px; overflow-x: auto; line-height: 1.55; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(245, 250, 255, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .inner { max-width: 1160px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 750; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.site-header nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.site-header nav a { color: var(--navy); text-decoration: none; padding: 7px 12px; border-radius: 8px; font-weight: 550; font-size: 15px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { background: var(--mist); }
.site-header nav a.icon { display: flex; padding: 7px; }
.site-header nav svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 650; font-size: 16px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
/* White on the logo's bright blue is only 2.9:1, so buttons use a deeper shade of it (4.9:1). */
.btn.primary { background: var(--blue-ink); color: #fff; }
.btn.primary:hover { background: #1a66cc; }
.btn.secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn.secondary:hover { background: var(--mist); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; }
.site-footer .inner { max-width: 1160px; margin: 0 auto; padding: 28px 20px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px; }
.site-footer a { color: var(--navy); }
.site-footer .spacer { flex: 1; }

@media (max-width: 640px) {
  .site-header nav a:not(.icon) { padding: 7px 8px; font-size: 14px; }
  .site-header .inner { gap: 12px; }
}