/* ==========================================================================
   Design tokens - doderlein.com
   Light, zero radius, hairline borders, Inter sentence-case headings,
   near-monochrome with a single clay accent on the CTA.
   This file is the source of truth for the revamp build.
   ========================================================================== */

:root {
  /* Canvas + surface */
  --bg-body: #f4f3ef; /* warm paper */
  --bg-surface: #ffffff; /* cards, the contact band */
  --bg-ink: #18181a; /* near-black, used for dark footer/CTA band */

  /* Text */
  --text-main: #18181a; /* near-black */
  --text-meta: #6b6b64; /* warm grey, secondary */
  --text-faint: #9b9b92; /* labels, captions */
  --text-on-ink: #f4f3ef; /* text on the near-black band */

  /* Borders (hairline is the Nordic signature) */
  --border-hair: rgba(24, 24, 26, 0.12); /* subtle ledger dividers */
  --border-strong: #18181a; /* emphasis borders, buttons */

  /* Accent - the only color, used on the primary CTA and link hover */
  --accent: #b07d62; /* clay */
  --accent-ink: #8f6149; /* clay pressed/hover */

  /* Typography */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, 'Liberation Mono', 'Courier New', monospace;

  /* Heading treatment (locked: variant B - Inter regular, sentence case, tight).
     Display headlines use --hd-weight; smaller section headers may step up to 500. */
  --hd-family: var(--font-sans);
  --hd-weight: 400;
  --hd-weight-section: 500;
  --hd-transform: none;
  --hd-tracking: -0.02em;
  --hd-line: 1.08;

  /* Type scale (fluid) */
  --text-xs: clamp(0.68rem, 0.64rem + 0.2vw, 0.74rem);
  --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.88rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-display: clamp(2.6rem, 1.8rem + 4.2vw, 5rem);

  /* Spacing - 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Layout */
  --content: 1080px; /* portfolio ledger + sections */
  --reading: 680px; /* prose column */
  --nav-height: 72px;

  /* UI */
  --radius: 0px; /* zero radius is the defining trait */
  --border-width: 1px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 16px;
  --reveal-duration: 0.6s;
}