/* =====================================================================
 * Groundwork — design tokens.
 * Quiet, institutional. The questions are the show; chrome stays out
 * of the way. Self-hosted DM Sans + Georgia (system fallback).
 * ===================================================================== */

@font-face {
    font-family: 'DM Sans';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/DMSans-Variable.woff2') format('woff2-variations'),
         url('/assets/fonts/DMSans-Variable.woff2') format('woff2');
}

:root {
    /* ---- Palette ---------------------------------------------------- */
    --ink-0:     #0B0820;   /* page bg */
    --ink-1:     #11102A;   /* surface */
    --ink-2:     #1A1838;   /* surface raised */
    --ink-3:     #221F44;   /* surface highest */
    --line:      #2B2750;   /* default border */
    --line-soft: #1F1C42;   /* whisper border */

    --text-1:    #F4F2FF;   /* primary */
    --text-2:    #B7B2D8;   /* secondary */
    --text-3:    #8A85B0;   /* tertiary */
    --text-4:    #5E5984;   /* placeholder */

    --accent:    #6C5CE7;   /* used sparingly — focus, links, active nav */
    --accent-2:  #9889C0;   /* muted variant */
    --accent-3:  #4A3AB0;   /* deep variant */

    --ok:        #4ADE80;
    --warn:      #F59E0B;
    --err:       #F87171;

    /* ---- Type ------------------------------------------------------- */
    --font-system:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-editorial: Georgia, 'Times New Roman', serif;
    --font-mono:      'JetBrains Mono', Consolas, Menlo, monospace;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-17: 1.0625rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --fs-36: 2.25rem;

    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.55;
    --lh-reading: 1.7;

    /* ---- Geometry --------------------------------------------------- */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;

    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   24px;
    --space-6:   32px;
    --space-7:   48px;
    --space-8:   64px;

    /* ---- Motion ----------------------------------------------------- */
    --motion-fast:  140ms cubic-bezier(.4, 0, .2, 1);
    --motion-base:  220ms cubic-bezier(.4, 0, .2, 1);
    --motion-slow:  360ms cubic-bezier(.4, 0, .2, 1);
    --motion-spring: 420ms cubic-bezier(.34, 1.56, .64, 1);

    /* ---- Layout ----------------------------------------------------- */
    --rail-w:    240px;
    --content-w: 760px;
    --side-w:    300px;
    --header-h:  56px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:  0ms linear;
        --motion-base:  0ms linear;
        --motion-slow:  0ms linear;
        --motion-spring: 0ms linear;
    }
}

/* ---- Base reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ink-0);
    color: var(--text-1);
    font-family: var(--font-system);
    font-size: var(--fs-15);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- Editorial body (Article body, current thinking) ------------- */
.editorial {
    font-family: var(--font-editorial);
    font-size: var(--fs-17);
    line-height: var(--lh-reading);
    color: var(--text-1);
}
.editorial p + p { margin-top: 1em; }

/* ---- Utility ------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}