/* ─────────────────────────────────────────────────────────────
   CINQ — colors_and_type.css
   Base tokens + semantic variables + typographic resets.
   Conventions: Tailwind-esque 50–700 scales · base-8 rhythm
   ───────────────────────────────────────────────────────────── */

/* Fonts via Google Fonts (Inter + Instrument Serif — both match
   the Figma source 1:1 by name). Self-hosted copies live in /fonts/. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ── Base palette ───────────────────────────────────────── */
  --black:            #000000;
  --white:            #FFFFFF;

  /* Beige — warm paper */
  --beige-50:         #FAF5F0;
  --beige-100:        #F6E8E1;
  --beige-200:        #EDD5C8;
  --beige-300:        #E0BBA8;

  /* Terracotta — signature accent */
  --terracotta-300:   #D4956A;
  --terracotta-400:   #C4784D;
  --terracotta-500:   #B45A2E;   /* brand primary */
  --terracotta-600:   #8E4724;
  --terracotta-700:   #6B351B;

  /* Sauge — secondary accent */
  --sauge-300:        #A8B5A0;
  --sauge-400:        #8A9E80;
  --sauge-500:        #6B8560;
  --sauge-600:        #516847;

  /* Charcoal — neutrals (text / ui) */
  --charcoal-400:     #6B6B6B;
  --charcoal-500:     #4A4A4A;
  --charcoal-600:     #2E2E2E;
  --charcoal-700:     #1A1A1A;
  --gray-100:         #F2F2F2;
  --gray-150:         #F5F5F5;
  --gray-200:         #D9D9D9;
  --gray-400:         #808080;
  --gray-500:         #666666;

  /* ── Semantic tokens ────────────────────────────────────── */
  /* Backgrounds */
  --bg-primary:       var(--white);
  --bg-dark:          var(--black);
  --bg-warm:          var(--beige-100);
  --bg-subtle:        var(--beige-50);
  --bg-muted:         var(--gray-100);

  /* Foregrounds */
  --fg-default:       var(--charcoal-700);
  --fg-on-dark:       var(--white);
  --fg-on-warm:       var(--charcoal-700);
  --fg-muted:         var(--charcoal-400);
  --fg-subtle:        var(--gray-400);
  --fg-accent:        var(--terracotta-500);
  --fg-accent-hover:  var(--terracotta-600);

  /* Borders */
  --border-default:   var(--beige-300);
  --border-subtle:    var(--gray-200);
  --border-on-dark:   rgba(255, 255, 255, 0.20);
  --border-accent:    var(--terracotta-500);

  /* ── Type families ──────────────────────────────────────── */
  --font-sans:        "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:       "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-mono:        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Type scale (Tailwind naming · base-8) ──────────────── */
  --text-sm:          12px;   --lh-sm:    16px;
  --text-base:        14px;   --lh-base:  20px;
  --text-lg:          16px;   --lh-lg:    24px;
  --text-xl:          18px;   --lh-xl:    28px;
  --text-2xl:         20px;   --lh-2xl:   28px;
  --text-3xl:         24px;   --lh-3xl:   32px;
  --text-4xl:         32px;   --lh-4xl:   40px;
  --text-5xl:         40px;   --lh-5xl:   48px;
  --text-6xl:         48px;   --lh-6xl:   56px;
  --text-7xl:         64px;   --lh-7xl:   72px;

  /* ── Weight ─────────────────────────────────────────────── */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* ── Spacing (base-8) ───────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-2xl:       24px;
  --radius-pill:      999px;

  /* ── Shadows (restrained — brand prefers borders) ───────── */
  --shadow-xs:        0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm:        0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md:        0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg:        0 12px 32px rgba(26, 26, 26, 0.10);
  --shadow-focus:     0 0 0 3px rgba(180, 90, 46, 0.25);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         120ms;
  --dur-base:         200ms;
  --dur-slow:         320ms;

  /* ── Grid ───────────────────────────────────────────────── */
  --grid-max:         1280px;
  --grid-gutter:      24px;
  --page-pad-x:       80px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic type classes
   ───────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-7xl);
  line-height: var(--lh-7xl);
  letter-spacing: -0.02em;
  color: var(--fg-default);
}
.h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  letter-spacing: -0.02em;
  color: var(--fg-default);
}
.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: -0.015em;
  color: var(--fg-default);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.01em;
  color: var(--fg-default);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  color: var(--fg-default);
}
.h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  color: var(--fg-default);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--fg-default);
}
.small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-default);
}
.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.code, code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Sensible resets for tokens to work out of the box */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a.link {
  color: var(--fg-accent);
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a.link:hover { color: var(--fg-accent-hover); }