/* ── SecurePeak base ──────────────────────────────────────────────────
   Minimal resets + link colours. Components carry their own styling.
   Everything reads semantic aliases, so [data-mode="terminal"] is the
   only switch between paper and terminal surfaces. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);letter-spacing:var(--track-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[data-mode="terminal"]{background:var(--surface-page);color:var(--text-body)}
a{color:var(--text-link);text-decoration:none;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
/* Focus. --focus-ring was defined but never applied, so every interactive
   element fell back to the browser default — which is close to invisible on
   the ink surface. :where() keeps specificity at 0 so a component can still
   override. Controls that manage their own focus treatment opt out with
   data-sp-control, or they would show two rings. */
:where(a,button,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus-ring)}
:where(input,select,textarea):not([data-sp-control]):focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--signal-200);color:var(--ink-900)}
[data-mode="terminal"] ::selection{background:var(--signal-700);color:#F2F7F4}
:where(h1,h2,h3,h4){font-family:var(--font-display);color:var(--text-display);letter-spacing:var(--track-heading);margin:0}
:where(p){text-wrap:pretty}
code,kbd,samp,pre{font-family:var(--font-mono)}