/* =========================================================
   BASE — Reset · Design Tokens · Typography
   ========================================================= */

/* ── Font ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body, h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

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

input, button, textarea, select { font: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* ── Tokens — Light ──────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --s-page: #f4f3ef;
  --s-1:    #fbfaf7;
  --s-2:    #f0eee8;
  --s-3:    #ffffff;
  --s-4:    #ece9e2;
  --s-5:    #e6e2db;

  /* Text */
  --t-1: #111111;
  --t-2: rgba(17,17,17,0.72);
  --t-3: rgba(17,17,17,0.50);

  /* Borders */
  --b-1: rgba(17,17,17,0.10);
  --b-2: rgba(17,17,17,0.06);

  /* Shadows */
  --sh-1: 0 4px 16px rgba(16,18,22,0.04), 0 12px 32px rgba(16,18,22,0.06);
  --sh-2: 0 8px 24px rgba(16,18,22,0.06), 0 24px 56px rgba(16,18,22,0.10);
  --sh-card: 0 18px 42px rgba(16,18,20,0.05), inset 0 1px 0 rgba(255,255,255,0.78);
  --sh-card-hover: 0 24px 54px rgba(16,18,20,0.08), inset 0 1px 0 rgba(255,255,255,0.88);

  /* Brand */
  --brand:       #1b3c53;
  --brand-warm:  #d2c1b6;
  --brand-ghost: rgba(27,60,83,0.08);

  /* Radii */
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* Layout */
  --mw:        1180px;
  --mw-text:   760px;
  --mw-narrow: 640px;
  --pad-x:     clamp(20px,3.5vw,36px);
  --section-y: clamp(80px,9vw,128px);

  /* Typography */
  --f-display: 'Syne', -apple-system, sans-serif;
  --f-body:    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --tx-xs:   0.72rem;
  --tx-sm:   0.875rem;
  --tx-base: 1rem;
  --tx-lg:   1.125rem;
  --tx-xl:   1.375rem;
  --tx-2xl:  1.75rem;
  --tx-3xl:  2.25rem;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-7:  32px; --sp-8:  40px;
  --sp-9:  48px; --sp-10: 64px; --sp-11: 80px;

  /* Focus */
  --focus: 0 0 0 3px rgba(27,60,83,0.18);

  /* Header */
  --hdr-h:       68px;
  --hdr-bg:      rgba(251,250,247,0.76);
  --hdr-bg-s:    rgba(251,250,247,0.96);
  --hdr-border:  rgba(17,17,17,0.08);
  --hdr-text:    #111111;
  --hdr-muted:   rgba(17,17,17,0.62);

  /* Footer */
  --ftr-bg:     #f0eee8;
  --ftr-text:   #111111;
  --ftr-muted:  rgba(17,17,17,0.62);
  --ftr-border: rgba(17,17,17,0.08);

  /* Easing */
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --ease-io:   cubic-bezier(0.4,0,0.2,1);
  --dur-fast:  160ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;
}

/* ── Tokens — Dark ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --s-page: #0f1113;
    --s-1:    #13171b;
    --s-2:    #171c21;
    --s-3:    #1c2228;
    --s-4:    #20262d;
    --s-5:    #252c34;

    --t-1: #f2f3f4;
    --t-2: rgba(242,243,244,0.74);
    --t-3: rgba(242,243,244,0.50);

    --b-1: rgba(255,255,255,0.10);
    --b-2: rgba(255,255,255,0.06);

    --sh-1: 0 4px 16px rgba(0,0,0,0.18), 0 14px 36px rgba(0,0,0,0.28);
    --sh-2: 0 8px 24px rgba(0,0,0,0.24), 0 24px 60px rgba(0,0,0,0.36);
    --sh-card: 0 22px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
    --sh-card-hover: 0 26px 56px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.07);

    --brand:       #d2c1b6;
    --brand-warm:  #7f97a6;
    --brand-ghost: rgba(210,193,182,0.10);

    --focus: 0 0 0 3px rgba(210,193,182,0.20);

    --hdr-bg:    rgba(19,23,27,0.76);
    --hdr-bg-s:  rgba(19,23,27,0.96);
    --hdr-border: rgba(255,255,255,0.10);
    --hdr-text:   #f2f3f4;
    --hdr-muted:  rgba(242,243,244,0.66);

    --ftr-bg:     #171c21;
    --ftr-text:   #f2f3f4;
    --ftr-muted:  rgba(242,243,244,0.66);
    --ftr-border: rgba(255,255,255,0.08);
  }
}

/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: var(--f-body);
  background: var(--s-page);
  color: var(--t-1);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--t-1);
}

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 4px;
}

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