/* base.css — SpinWatch.pro — tokens, resets, typography */
:root{
  --color-bg-dark:#1E2124;
  --color-surface-dark:#2A2E33;
  --color-accent:#B87333;
  --color-accent-light:#D9925A;
  --color-bg-light:#F4F2EE;
  --color-text-light:#1B1D1F;
  --color-text-dark:#EDEBE7;
  --color-warning:#8A5A2B;
  --color-grid:#4A4E52;

  --font-head:'Space Grotesk',Arial,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;

  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-22:1.375rem; --fs-28:1.75rem; --fs-36:2.25rem; --fs-48:3rem;

  --max-content:1160px;
  --gutter:24px;
  --gutter-mob:16px;
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg-light:#EDEAE4;
    --color-text-light:#1B1D1F;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-bg-light);
  color:var(--color-text-light);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration-thickness:1px}
a:hover{color:var(--color-accent-light)}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .6em;
  color:var(--color-text-light);
}
h1{font-size:var(--fs-36)}
h2{font-size:var(--fs-28)}
h3{font-size:var(--fs-22)}
p{margin:0 0 1em;max-width:68ch}
ul,ol{margin:0 0 1em;padding-left:1.3em}
[hidden]{display:none!important}

.mono,.value-mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--color-accent);color:#fff;
  padding:10px 16px;z-index:1000;
  font-family:var(--font-body);
}
.skip-link:focus{left:8px;top:8px}

:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.op-editable{
  color:var(--color-warning);
  font-size:var(--fs-12);
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.badge-18{
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--color-accent);
  color:var(--color-text-dark);
  font-family:var(--font-head);
  font-weight:700;
  font-size:var(--fs-14);
  padding:2px 8px;
  border-radius:4px;
  line-height:1;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}