/* =============================================================
   Ourday — Colors & Type
   The visual foundations. Warm-neutral, lived-in, editorial.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  /* ---------- COLOR — surfaces ---------- */
  --bg-cream:        #FAF6F0;  /* primary background — warm off-white */
  --bg-cream-deep:   #F8F3EB;
  --surface-1:       #F0E9DC;  /* secondary surface — cookbook page */
  --surface-2:       #EDE4D4;
  --surface-wheat:   #E8DDC7;  /* callout / hover */
  --surface-shade:   #DCD0B6;  /* subtle divider tone */

  /* ---------- COLOR — text ---------- */
  --ink-1:           #1F1B17;  /* darkest body */
  --ink-2:           #2A2520;  /* primary */
  --ink-secondary:   #4A4138;  /* subheads, captions */
  --ink-secondary-2: #5A5045;
  --ink-muted:       #7A7068;  /* timestamps, fine print */
  --ink-muted-2:     #8A8075;
  --ink-on-accent:   #FAF6F0;

  /* ---------- COLOR — accent (lead: muted terracotta) ---------- */
  --accent:          #B85C3F;
  --accent-deep:     #A04A30;
  --accent-soft:     #D58367;  /* hover-on-cream */
  --accent-wash:     #F2E0D5;  /* tinted surface */

  /* ---------- COLOR — alternate accent (forest) ---------- */
  --forest:          #3A5C4A;
  --forest-deep:     #2D4A3C;

  /* ---------- COLOR — functional ---------- */
  --line:            #E3D8C3;  /* hairline divider on cream */
  --line-strong:     #C8B998;
  --focus-ring:      rgba(184, 92, 63, 0.35);
  --shadow-warm:     rgba(58, 42, 28, 0.08);

  /* ---------- TYPE — families ---------- */
  --font-serif:  "Source Serif 4", "Source Serif Pro", "Tiempos Headline",
                 Georgia, "Times New Roman", serif;
  --font-sans:   "DM Sans", "GT Walsheim", "Untitled Sans",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- TYPE — scale (editorial) ---------- */
  --fs-hero:     clamp(44px, 5.5vw, 64px);
  --fs-h1:       clamp(36px, 4vw, 48px);
  --fs-h2:       clamp(28px, 3vw, 36px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     17px;
  --fs-body-lg:  18px;
  --fs-small:    15px;
  --fs-fine:     13px;

  --lh-tight:    1.12;
  --lh-snug:     1.25;
  --lh-body:     1.65;   /* 1.6–1.7 target */
  --lh-loose:    1.75;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- SPACING (8px base, editorial generosity) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;       /* default — soft, not rounded */
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- SHADOW (warm, low) ---------- */
  --shadow-sm: 0 1px 2px rgba(58, 42, 28, 0.06);
  --shadow-md: 0 4px 14px rgba(58, 42, 28, 0.08);
  --shadow-lg: 0 18px 40px -16px rgba(58, 42, 28, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =============================================================
   Semantic primitives — apply these by class or element.
   Avoid global element resets so this file can layer onto pages.
   ============================================================= */

.od-body, body.od {
  background: var(--bg-cream);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.od-hero {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  text-wrap: balance;
}

.od-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  text-wrap: balance;
}

.od-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  text-wrap: balance;
}

.od-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}

.od-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-fine);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.od-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.od-body-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

.od-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.od-fine {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-fine);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* Wordmark — italic-ish display use */
.od-wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

/* Links — accent, restrained underline */
.od-link {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.od-link:hover { color: var(--accent); }