/* One theme, one source of truth. Every page imports this once; site.css only references these variables. */
:root {
  /* Primitive palette. Tiffany Blue is the signature, used as a whisper: washes and small marks, never text. */
  --paper-50: #fbfaf7;
  --paper-100: #f3f3ef;
  --paper-200: #e7e6e1;
  --paper-300: #dcdad3;
  --paper-400: #cfccc3;
  --ink-900: #1c1f1f;
  --ink-700: #3f4645;
  --ink-600: #565e5d;
  --tiffany-300: #81d8d0;
  --tiffany-100: #d8f2ef;
  --tiffany-50: #eef8f6;
  --teal-700: #0f766f;
  --teal-800: #0b5c57;
  --green-700: #2e6b36;
  --green-100: #e3efe3;
  --red-700: #9b2c22;
  --red-100: #f6e0dc;

  /* Semantic: color by intent */
  --color-bg: var(--paper-50);
  --color-bg-sunken: var(--paper-100);
  --color-surface: #ffffff;
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-rule: rgba(28, 31, 31, 0.13);
  --color-rule-strong: rgba(28, 31, 31, 0.3);
  --color-action-primary: var(--teal-700);
  --color-action-primary-hover: var(--teal-800);
  --color-action-primary-text: var(--paper-50);
  --color-action-primary-soft: var(--tiffany-100);
  --color-link: var(--teal-700);
  --color-focus: var(--teal-700);
  --color-success: var(--green-700);
  --color-success-bg: var(--green-100);
  --color-error: var(--red-700);
  --color-error-bg: var(--red-100);
  --color-signature: var(--tiffany-300);
  --color-signature-wash: var(--tiffany-50);
  --color-photo-1: var(--paper-200);
  --color-photo-2: var(--paper-300);
  --color-photo-3: var(--paper-400);
  --color-scrim: rgba(28, 31, 31, 0.88);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-label: 0.08em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Space: 4px rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: 1rem;
  --measure: 34rem;
  --page-max: 75rem;

  /* Shape, depth, motion */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-focus: 2px;
  --border-thick: 2px;
  --focus-offset: 3px;
  --shadow-raised: 0 2px 16px rgba(28, 31, 31, 0.08);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-spin: 800ms;
  --duration-spin-slow: 2400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --target-min: 2.75rem;
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 64rem) {
  :root { --gutter: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}