:root {
    color-scheme: light;
    --page-background: #f8fafc;
    --surface-background: #ffffff;
    --surface-muted: #f1f5f9;
    --text-primary: #0f172a;
    --text-muted: #475569;
    --border-colour: #cbd5e1;
    --accent-primary: #2563eb;
    --accent-success: #22c55e;
    --accent-warning: #f97316;
    --focus-ring: #2563eb;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Aptos Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-background: #020617;
    --surface-background: #0f172a;
    --surface-muted: #1e293b;
    --text-primary: #f8fafc;
    --text-muted: #cbd5e1;
    --border-colour: #334155;
    --accent-primary: #60a5fa;
    --accent-success: #4ade80;
    --accent-warning: #fb923c;
    --focus-ring: #60a5fa;
}

body {
    margin: 0;
    color: var(--text-primary);
    background: var(--page-background);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

p,
li,
label,
input,
select,
textarea,
button,
table {
    font-family: var(--font-body);
}

a {
    color: var(--accent-primary);
}

    a:hover {
        color: var(--accent-warning);
    }

button,
input,
select,
textarea {
    font-family: var(--font-body);
    font-size: inherit;
    line-height: inherit;
}

button {
    color: var(--text-primary);
    background: var(--surface-background);
    border: 1px solid var(--border-colour);
}

    button:hover {
        border-color: var(--accent-warning);
    }

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 0.2rem;
}