/* ===========================================================
   variables.css — design tokens, theme (light/dark), resets
   Edit colors and fonts here to change the whole site.
   =========================================================== */

:root {
  color-scheme: light dark;

  /* Light theme (default) */
  --ink: #ECE9E2;         /* page background */
  --paper: #14161A;       /* primary text */
  --paper-dim: #6B6E73;   /* secondary text */
  --signal: #3452D9;      /* accent (links, focus, buttons) */
  --line: #DEDAD0;        /* borders/dividers */
  --surface: rgba(0,0,0,0.02); /* subtle panel fill */

  /* Typography tokens: change fonts for the whole site here.
     --font-sans: the device's own UI font (San Francisco on Apple,
       Segoe UI on Windows, Roboto on Android, Ubuntu/Cantarell on Linux).
       Nothing is downloaded; every device gets the font it renders best.
     --font-ui:   labels, nav, chips, dates, captions. Same as body text
       for legibility. To bring back the mono "build log" look, set it
       to var(--font-mono).
     --font-mono: code only. */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-ui: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout tokens (shared by header, main, footer) */
  --header-h: 3.75rem;    /* header bar height, reserved before it loads */
  --gutter: 2rem;         /* side padding: tablet and desktop */
  --chrome-max: 72rem;    /* max width of header/footer content */

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0E1013;
    --paper: #ECE9E2;
    --paper-dim: #8C8F94;
    --signal: #5B7FFF;
    --line: #22252B;
    --surface: rgba(255,255,255,0.03);
  }
}
:root[data-theme="dark"] {
  --ink: #0E1013;
  --paper: #ECE9E2;
  --paper-dim: #8C8F94;
  --signal: #5B7FFF;
  --line: #22252B;
  --surface: rgba(255,255,255,0.03);
}

/* Mobile tier: tighter side padding everywhere. */
@media (max-width: 639.98px) {
  :root { --gutter: 1.25rem; }
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
html, body { min-height: 100%; margin: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  transition: background 0.2s ease, color 0.2s ease;
}

.mono {
  font-family: var(--font-ui);
}

a { color: inherit; }

::selection {
  background: var(--signal);
  color: var(--ink);
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}