@layer reset, tokens, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul { margin-block-start: 0; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --color-brand: #3f2f7f;
    --color-brand-strong: #2e205f;
    --color-accent: #a64725;
    --color-text: #241f2c;
    --color-text-muted: #5f5968;
    --color-surface: #fffdf9;
    --color-surface-soft: #f3eef8;
    --color-border: #d8d0e1;
    --color-focus: #0067c5;
    --shadow-card: 0 18px 50px rgb(46 32 95 / 12%);
    --radius-small: .55rem;
    --radius-large: 1.4rem;
    --space-page: clamp(1rem, 4vw, 2.5rem);
    --space-section: clamp(3rem, 8vw, 6.5rem);
    --content-width: 72rem;
    --text-width: 46rem;
  }
}

@layer base {
  html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--color-surface); color: var(--color-text); }
  body { min-height: 100vh; margin: 0; line-height: 1.65; text-rendering: optimizeLegibility; }
  main:focus { outline: none; }
  h1, h2, h3 { line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
  h1 { font-size: clamp(2.45rem, 8vw, 5.5rem); }
  h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
  h3 { font-size: 1.2rem; }
  p, li { max-width: 72ch; }
  a { color: var(--color-brand); text-underline-offset: .2em; }
  a:hover { color: var(--color-accent); }
  :focus-visible { outline: .2rem solid var(--color-focus); outline-offset: .2rem; }
  ::selection { background: #d9cdf4; color: var(--color-brand-strong); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text: #f7f3fb;
      --color-text-muted: #cbc3d3;
      --color-surface: #17131d;
      --color-surface-soft: #272032;
      --color-border: #4f4659;
      --color-brand: #c9b8ff;
      --color-brand-strong: #eadfff;
      --color-accent: #ffad80;
      --color-focus: #71bcff;
      --shadow-card: none;
    }
  }
}