/* ============================================================
   Duck IT — Foundations
   Colour, type, spacing, radii, motion. Import this once.
   ============================================================ */

/* Fonts ------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Colour ============================================== */
  /* Ground */
  --ink:        #0E1116;          /* primary text, deep ground */
  --ink-soft:   #3A3F49;          /* body copy */
  --ink-mute:   #7B8290;          /* metadata */

  /* Paper */
  --paper:       #F7F4EE;         /* primary canvas — warm off-white */
  --paper-deep:  #EDE7DC;         /* recessed surface */
  --paper-rise:  #FFFFFF;         /* elevated card (rare) */

  /* Accent — single yellow */
  --duck:        #F2C12E;
  --duck-soft:   #FFE69A;
  --duck-deep:   #7A5E0B;         /* yellow as text on paper */

  /* Inverted */
  --pond:        #0E1116;
  --pond-soft:   #1A1F28;
  --pond-rise:   #2A303D;

  /* Hairlines (use sparingly) */
  --ripple:      #D9CFB9;
  --ripple-soft: rgba(217,207,185,0.6);

  /* Status — only in actual error UI */
  --warn:  #C2410C;
  --error: #B42318;
  --good:  #15803D;

  /* === Type ================================================= */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script:  'Caveat', 'Bradley Hand', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, calm */
  --t-display:    clamp(48px, 7vw, 96px); /* @kind font */ /* hero statement */
  --t-h1:         clamp(36px, 4.5vw, 64px); /* @kind font */
  --t-h2:         clamp(28px, 3vw, 44px); /* @kind font */
  --t-h3:         22px; /* @kind font */
  --t-h4:         18px; /* @kind font */
  --t-body-lg:    19px; /* @kind font */ /* lead paragraph */
  --t-body:       16px; /* @kind font */ /* default body */
  --t-body-sm:    14px; /* @kind font */
  --t-caption:    13px; /* @kind font */
  --t-eyebrow:    12px; /* @kind font */ /* small caps */

  /* Line heights */
  --lh-display: 1.02; /* @kind font */
  --lh-h:       1.12; /* @kind font */
  --lh-body:    1.6; /* @kind font */
  --lh-tight:   1.3; /* @kind font */

  /* Tracking */
  --track-display: -0.02em; /* @kind font */ /* serif likes a hair tighter */
  --track-tight:   -0.01em; /* @kind font */
  --track-base:    0; /* @kind font */
  --track-loose:   0.06em; /* @kind font */
  --track-eyebrow: 0.08em; /* @kind font */

  /* === Spacing — 4pt scale ================================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-6:   24px;
  --s-8:   32px;
  --s-12:  48px;
  --s-16:  64px;
  --s-24:  96px;
  --s-32:  128px;

  /* === Radii ================================================ */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   20px;
  --r-pill: 9999px;

  /* === Shadow — one recipe ================================== */
  --shadow: 0 1px 2px rgba(14,17,22,0.04), 0 8px 24px rgba(14,17,22,0.06);

  /* === Motion =============================================== */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --d-fast: 160ms; /* @kind other */
  --d-base: 220ms; /* @kind other */
  --d-slow: 420ms; /* @kind other */
  --d-reveal: 700ms; /* @kind other */

  /* === Layout =============================================== */
  --container: 1280px; /* @kind spacing */
  --gutter: 24px; /* @kind spacing */
  --measure: 68ch; /* @kind other */ /* ideal reading width */
}

/* Reduced motion — collapse all animation */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms; /* @kind other */
    --d-base: 0ms; /* @kind other */
    --d-slow: 0ms; /* @kind other */
    --d-reveal: 0ms; /* @kind other */
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Semantic typography classes — use these, not raw sizes
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
  font-optical-sizing: auto;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-h);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-h);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-base);
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.lead, p.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--measure);
}

p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}

.caption {
  font-size: var(--t-caption);
  color: var(--ink-mute);
  line-height: var(--lh-tight);
}

/* The eyebrow — small caps, not uppercase + tracking */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-mute);
}

/* Editorial italic pull quote */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-h);
  color: var(--ink);
  border-left: 2px solid var(--duck);
  padding-left: var(--s-6);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Selection — quiet duck */
::selection {
  background: var(--duck-soft);
  color: var(--ink);
}

/* Links — underline on hover, never on rest */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease);
}
a:hover {
  border-bottom-color: var(--duck);
}

/* ============================================================
   Utility — section backgrounds
   ============================================================ */
.surface-paper        { background: var(--paper);      color: var(--ink); }
.surface-paper-deep   { background: var(--paper-deep); color: var(--ink); }
.surface-paper-rise   { background: var(--paper-rise); color: var(--ink); }
.surface-pond         { background: var(--pond);       color: var(--paper); }
.surface-pond .eyebrow,
.surface-pond p,
.surface-pond .caption { color: rgba(247,244,238,0.7); }
.surface-pond h1,
.surface-pond h2,
.surface-pond h3,
.surface-pond .display { color: var(--paper); }
.accent-duck          { color: var(--duck-deep); }
.surface-pond .accent-duck { color: var(--duck); }