/* Base: Reset, Tokens, Elements */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

:root{
  /* color tokens */
  --bg: #ffffff;
  --fg: #1c1c1c;
  --muted: #666;
  --border: #e6e6e6;
  --accent: #0a7cff;
  --accent-contrast: #fff;
  --danger: #c62828;
  --focus: #5a9; /* visible focus color */

  /* typography */
  --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ff-head: var(--ff-sans);
  --fs-100: .875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.25rem;
  --fs-500: 1.5rem;
  --fs-600: 1.875rem;
  --lh: 1.6;

  /* layout */
  --container: 1200px;
  --gutter: 1rem;
  --radius: .75rem;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --fg: #f2f4f7;
    --muted: #b6bcc6;
    --border: #23262d;
    --accent: #6aa7ff;
    --accent-contrast: #0b0d12;
    --focus: #9ad;
  }
  img{ filter: brightness(.98) contrast(1.02); }
}

html, body { height: 100%; }
body{
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 400 var(--fs-200)/var(--lh) var(--ff-sans);
  text-rendering: optimizeLegibility;
}

img, svg, video{ display:block; max-width:100%; height:auto; }
a{ color: var(--accent); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }
hr{ border:0; border-top:1px solid var(--border); margin:1.5rem 0; }
code, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .95em; }
table{ width:100%; border-collapse: collapse; }
th, td{ padding:.5rem .75rem; border-bottom:1px solid var(--border); text-align:left; }