/* ============================================================
   CONY FRESH — Foundations
   Sage greens, paper creams, refined serifs.
   ============================================================ */

/* ---------- Brand fonts (self-hosted) ----------
   Playfair Display — display, headlines, italic flourishes
   Times New Roman — body, captions, long-form
   --------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Times New Roman Brand';
  src: url('fonts/times.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---------- COLOR — Sage (primary) ---------- */
  --sage-50:  #f4f6f2;
  --sage-100: #e6ecdf;
  --sage-200: #cdd9c4;
  --sage-300: #b3c4a7;
  --sage-400: #9ab68f;
  --sage-500: #86a98a;  /* brand primary */
  --sage-600: #6b8e6f;
  --sage-700: #547355;
  --sage-800: #3f5a40;
  --sage-900: #2a3d2c;

  /* ---------- COLOR — Paper / Cream (neutral) ---------- */
  --cream-50:  #fdfbf6;  /* paper, default page bg */
  --cream-100: #f8f3e8;
  --cream-200: #efe7d3;
  --cream-300: #e2d6ba;
  --cream-400: #c9bb9d;

  /* ---------- COLOR — Ink (text) ---------- */
  --ink-900: #2c2a24;   /* primary text — warm near-black */
  --ink-700: #4a4742;
  --ink-500: #7b7670;
  --ink-300: #b8b3aa;
  --ink-100: #ddd8cd;

  /* ---------- COLOR — Warm accents ---------- */
  --terracotta: #c98768;
  --rose-dust:  #d4a89c;
  --honey:      #d9b46a;

  /* ---------- SEMANTIC color tokens ---------- */
  --bg:           var(--cream-50);
  --bg-elevated:  #ffffff;
  --bg-sunken:    var(--cream-100);
  --bg-tonal:     var(--sage-50);
  --bg-inverse:   var(--sage-800);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-700);
  --fg-subtle:    var(--ink-500);
  --fg-faint:     var(--ink-300);
  --fg-on-sage:   var(--cream-50);

  --accent:       var(--sage-500);
  --accent-soft:  var(--sage-200);
  --accent-deep:  var(--sage-700);

  --line:         var(--cream-300);
  --line-soft:    var(--cream-200);
  --line-strong:  var(--ink-300);

  /* ---------- TYPE — families ---------- */
  --font-display: 'Playfair Display', 'Times New Roman', Times, serif;
  --font-body:    'Times New Roman Brand', 'Times New Roman', Times, serif;
  --font-italic:  'Playfair Display', 'Times New Roman', Times, serif;  /* italic flourishes use Playfair italic */
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- TYPE — scale (1.250 minor third, anchored 17px) ---------- */
  --fs-xs:   0.75rem;   /* 12px — fine print, captions */
  --fs-sm:   0.875rem;  /* 14px — meta, labels */
  --fs-base: 1.0625rem; /* 17px — body */
  --fs-md:   1.25rem;   /* 20px — large body, lead */
  --fs-lg:   1.625rem;  /* 26px — h4 */
  --fs-xl:   2.125rem;  /* 34px — h3 */
  --fs-2xl:  2.875rem;  /* 46px — h2 */
  --fs-3xl:  3.875rem;  /* 62px — h1 */
  --fs-4xl:  5.25rem;   /* 84px — hero display */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cap:    0.22em;  /* tiny ALL CAPS labels */

  /* ---------- SPACING — 4px base ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- SHADOWS — soft, paper-like ---------- */
  --shadow-xs: 0 1px 1px rgba(44, 42, 36, 0.04);
  --shadow-sm: 0 1px 2px rgba(44, 42, 36, 0.05), 0 1px 1px rgba(44, 42, 36, 0.03);
  --shadow-md: 0 4px 12px rgba(44, 42, 36, 0.06), 0 1px 2px rgba(44, 42, 36, 0.04);
  --shadow-lg: 0 12px 32px rgba(44, 42, 36, 0.08), 0 2px 6px rgba(44, 42, 36, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC TYPE — drop these tags or classes anywhere
   ============================================================ */

html { color: var(--fg); background: var(--bg); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.lead {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

p, .p { margin: 0 0 1em 0; }

.eyebrow,
.caps {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cap);
  color: var(--fg-subtle);
}

.meta {
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  font-style: italic;
}

blockquote, .quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--fg);
  border-left: 1px solid var(--accent);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
}

a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }
a:hover { color: var(--sage-800); text-decoration-thickness: 1px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-8) 0;
}

::selection { background: var(--sage-200); color: var(--ink-900); }