/* contreforts.ai — design tokens
   Palette: quarried-stone neutrals, a blueprint-slate primary accent,
   a weathered-bronze secondary accent. No cream, no near-black-and-neon. */

:root {
  --stone-50:  #F7F6F2;
  --stone-100: #F1F0EC;
  --stone-200: #E4E2DB;
  --stone-300: #D2CFC5;
  --stone-500: #8B897F;
  --graphite-700: #46493F;
  --graphite-800: #2E312B;
  --graphite-900: #1A1C1B;

  --slate-500: #4C6E89;
  --slate-600: #35566E;
  --slate-700: #2A4457;

  --bronze-500: #C07C48;
  --bronze-600: #A8663A;
  --bronze-700: #8A5230;

  --bg: var(--stone-100);
  --bg-raised: var(--stone-50);
  --ink: var(--graphite-900);
  --ink-soft: var(--graphite-700);
  --line: var(--stone-300);
  --accent: var(--slate-600);
  --accent-strong: var(--slate-700);
  --accent-warm: var(--bronze-600);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --measure: 62ch;
  --radius: 3px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--graphite-900);
    --bg-raised: #22241f;
    --ink: var(--stone-100);
    --ink-soft: var(--stone-300);
    --line: #3c3f36;
    --accent: var(--slate-500);
    --accent-strong: #6488a3;
    --accent-warm: var(--bronze-500);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
  max-width: var(--measure);
}

a {
  color: inherit;
}

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

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