/* ========================================================================
   Settled Books — Design tokens + base typography
   Warm neutrals, restrained amber accent, DM Sans + DM Mono.
   ======================================================================== */

/* ------ Fonts ------ */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/DMMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/DMMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------ Tokens ------ */
:root {
  /* Warm neutrals */
  --sb-cream:    #FBF7F1;
  --sb-linen:    #F4EFE8;
  --sb-bone:     #EAE2D6;
  --sb-stone:    #C9BFB1;
  --sb-taupe:    #8F8578;
  --sb-sage:     #9AA394;
  --sb-ink-soft: #4A453F;
  --sb-ink:      #2A2724;
  /* Accent — used sparingly */
  --sb-amber:      #B8853A;
  --sb-amber-soft: #D4A85C;

  /* Type */
  --sb-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sb-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing */
  --sb-page-pad-x: clamp(20px, 5vw, 64px);
  --sb-max-w: 1200px;

  /* Radii (used very lightly — calm, not cartoony) */
  --sb-radius-sm: 2px;
  --sb-radius-md: 4px;
}

/* ------ Reset-ish ------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--sb-linen);
  background-image: url('assets/grain.svg');
  color: var(--sb-ink);
  font-family: var(--sb-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ------ Type roles ------ */
.sb-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-taupe);
  font-weight: 400;
}
.sb-display {
  font-family: var(--sb-font-sans);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--sb-ink);
  margin: 0;
  text-wrap: pretty;
}
.sb-h1 {
  font-family: var(--sb-font-sans);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--sb-ink);
  margin: 0;
  text-wrap: pretty;
}
.sb-h2 {
  font-family: var(--sb-font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--sb-ink);
  margin: 0;
  text-wrap: pretty;
}
.sb-h3 {
  font-family: var(--sb-font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sb-ink);
  margin: 0;
}
.sb-body {
  font-family: var(--sb-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sb-ink-soft);
  margin: 0;
}
.sb-body-lg {
  font-family: var(--sb-font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--sb-ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.sb-small {
  font-family: var(--sb-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-ink-soft);
  margin: 0;
}
.sb-mono {
  font-family: var(--sb-font-mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--sb-ink);
}
.sb-caption {
  font-family: var(--sb-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-taupe);
}

/* ------ Layout helpers ------ */
.sb-container {
  width: 100%;
  max-width: var(--sb-max-w);
  margin: 0 auto;
  padding-inline: var(--sb-page-pad-x);
}
.sb-divider {
  border: none;
  border-top: 1px solid var(--sb-stone);
  margin: 0;
}

/* ------ Buttons ------ */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--sb-font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: var(--sb-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.sb-btn--primary {
  background: var(--sb-ink);
  color: var(--sb-cream);
  border-color: var(--sb-ink);
}
.sb-btn--primary:hover {
  background: #1d1b18;
  border-color: #1d1b18;
}
.sb-btn--ghost {
  background: transparent;
  color: var(--sb-ink);
  border-color: var(--sb-stone);
}
.sb-btn--ghost:hover {
  border-color: var(--sb-ink);
}
.sb-btn--link {
  padding: 4px 0;
  border: none;
  color: var(--sb-ink);
  border-bottom: 1px solid var(--sb-stone);
  border-radius: 0;
}
.sb-btn--link:hover { border-bottom-color: var(--sb-amber); color: var(--sb-amber); }
.sb-btn--amber {
  background: var(--sb-amber);
  color: var(--sb-cream);
  border-color: var(--sb-amber);
}
.sb-btn--amber:hover { background: #a3742d; border-color: #a3742d; }

/* ------ Sections ------ */
.sb-section {
  padding-block: clamp(64px, 9vw, 120px);
}
.sb-section--bone { background-color: var(--sb-bone); background-image: url('assets/grain.svg'); }
.sb-section--cream { background-color: var(--sb-cream); background-image: url('assets/grain.svg'); }
.sb-section--ink { background: var(--sb-ink); color: var(--sb-cream); }
.sb-section--ink .sb-h1, .sb-section--ink .sb-h2, .sb-section--ink .sb-h3, .sb-section--ink .sb-display { color: var(--sb-cream); }
.sb-section--ink .sb-body, .sb-section--ink .sb-body-lg, .sb-section--ink .sb-small { color: rgba(251, 247, 241, 0.72); }
.sb-section--ink .sb-eyebrow, .sb-section--ink .sb-caption { color: rgba(251, 247, 241, 0.5); }

/* ------ Card ------ */
.sb-card {
  background: var(--sb-cream);
  border: 1px solid var(--sb-stone);
  padding: 28px;
  box-shadow:
    0 4px 12px rgba(42, 39, 36, 0.20),
    0 36px 80px -12px rgba(42, 39, 36, 0.42);
}

/* ------ Selection ------ */
::selection {
  background: var(--sb-amber);
  color: var(--sb-cream);
}

/* ------ Page transitions ------ */
.sb-page {
  animation: sb-fade-in 0.32s ease-out both;
}
@keyframes sb-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}