/* EUROCUTPRECISION — Base styles: reset, typography, layout primitives */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; color: var(--color-neutral-900); margin: 0; }
h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.type-display { font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: 600; color: var(--color-neutral-900); margin: 0; }
.type-small { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.type-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-line); }
.type-emphasized { font-weight: 600; }

/* Numeric/tabular data always uses the mono token with tabular figures (docs/40 §4) */
.num, .font-mono, table.data td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus ring: instant, never suppressed (docs/40 §13, docs/56 Focus Ring Snap) */
:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
  transition: none;
}
a, button, input, select, textarea, [tabindex] { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

/* Layout primitives */
.container {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
@media (max-width: 1023px) { .container { padding: 0 var(--space-6); } }
@media (max-width: 639px) { .container { padding: 0 var(--space-4); } }

.section { padding: var(--space-20) 0; }
@media (max-width: 1023px) { .section { padding: var(--space-12) 0; } }
@media (max-width: 639px) { .section { padding: var(--space-8) 0; } }

.section--tint { background: var(--color-neutral-100); }
.section--accent-tint { background: var(--color-accent-100); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--color-neutral-900); color: var(--color-neutral-0);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }