/* =====================================================================
   base.css — the shared foundation for conradi.studio
   Tokens + reset + core primitives. Load AFTER fonts.css and BEFORE any
   page-specific <style>. Page CSS may still override these locally, but
   new pages should inherit everything here rather than re-declaring it.
   ===================================================================== */

:root{
  /* paper — backgrounds, light → deep */
  --paper:#F2F0EA;
  --paper-2:#E9E7DF;
  --paper-3:#DEDBD2;

  /* ink — text & rules, dark → faint */
  --ink:#0F0E0B;
  --ink-2:#3A3833;
  --ink-3:#7A7770;
  --ink-4:#B8B5AD;

  /* lines */
  --rule:#1F1D18;       /* 3px section rules */
  --hairline:#CFCCC4;   /* 1px dividers */

  /* signature accent — the pale yellow used on hero / engage band /
     section tints / primary CTA. Tokenised so it lives in one place. */
  --accent:#FAFAD4;

  /* type families — one job each */
  --sans:'Inter Tight', system-ui, -apple-system, sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Source Serif 4', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --gutter:clamp(24px, 5vw, 96px);
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Mono eyebrow — quiet editorial label */
.eyebrow{
  font-family:var(--mono);
  font-style:normal;
  font-weight:400;
  letter-spacing:.005em;
  font-size:clamp(15px, 1.2vw, 18px);
  color:var(--ink);
  line-height:1.3;
}

/* Plain bordered CTA + filled accent variant */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--ink);
  border:1.5px solid var(--ink);
  padding:14px 22px;
  background:transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3)}
.btn--accent{background:var(--accent);border-color:var(--ink);font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.005em;line-height:1;padding:14px 22px}
.btn--accent .arr{font-family:var(--sans);transform:translateY(-1px)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3);background:var(--accent);color:var(--ink)}
.btn .arr{display:inline-block;transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}