/* Asterwise Base Styles — resets, globals, typography
Depends on: css/tokens.css (must load first) */
/* ─── Font faces ──────────────────────────────────────
Geist loads from Bunny Fonts CDN via in HTML
(added per-page in later step):
JetBrains Mono is self-hosted from public/fonts/
────────────────────────────────────────────────── */
@font-face {
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ─── Reset ───────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ─── Root ────────────────────────────────────────── */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
tab-size: 2;
}
body {
background-color: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-normal);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
/* ─── Typography ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-medium); }
h4 { font-size: var(--text-base); font-weight: var(--weight-medium); letter-spacing: 0; }
p {
color: var(--text-secondary);
line-height: var(--leading-normal);
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
color: var(--text-primary);
}
strong, b {
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.875em;
color: var(--accent);
background: var(--bg-subtle);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
border: var(--border-width) solid var(--border-subtle);
}
pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--code-text);
background: var(--code-bg);
border: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-4);
overflow-x: auto;
tab-size: 2;
}
pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
color: inherit;
border-radius: 0;
}
/* ─── Lists ───────────────────────────────────────── */
ul, ol {
padding-left: var(--space-5);
color: var(--text-secondary);
}
li {
line-height: var(--leading-normal);
margin-bottom: var(--space-1);
}
/* ─── Images & media ──────────────────────────────── */
img, svg, video {
display: block;
max-width: 100%;
}
/* ─── Forms (base — overridden in components) ─────── */
input, textarea, select, button {
font-family: var(--font-sans);
font-size: var(--text-base);
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
/* ─── Focus ring ──────────────────────────────────── */
:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--border-focus);
}
/* ─── Selection ───────────────────────────────────── */
::selection {
background: var(--accent-subtle);
color: var(--text-primary);
}
/* ─── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ─── Horizontal rule ─────────────────────────────── */
hr {
border: none;
border-top: var(--border-width) solid var(--border-subtle);
margin: var(--space-8) 0;
}
/* ─── Tables (base) ───────────────────────────────── */
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted);
padding: var(--space-2) var(--space-3);
border-bottom: var(--border-width) solid var(--border-subtle);
}
td {
padding: var(--space-3) var(--space-3);
border-bottom: var(--border-width) solid var(--border-subtle);
color: var(--text-primary);
font-size: var(--text-base);
vertical-align: top;
}
tr:last-child td {
border-bottom: none;
}
/* ─── Utility classes ─────────────────────────────── */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.hidden {
display: none !important;
}
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.font-mono { font-family: var(--font-mono); }
.eyebrow {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--text-muted);
}
/* ─── Animations (base keyframes) ────────────────── */
@keyframes fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}