/*
  Ridgeline brand layer. Loaded after Tailwind on every page.

  Colors come from the logo: slate #36474F and saddle brown #653614.
  Rather than rename classes across every page, this file repaints the
  Tailwind color classes the site already uses:
    green-*  -> brown accent (buttons, links, headings)
    blue-*   -> slate
    gray-*   -> warm neutrals
  So "bg-green-600" on this site renders brown. Use the same classes on new pages.
*/

:root {
  --slate-900: #1f2a30;
  --slate-800: #263238;
  --slate-700: #36474f; /* logo slate */
  --slate-500: #5b6b72;

  --brown-800: #4f2a10;
  --brown-700: #653614; /* logo brown */
  --brown-600: #7f4520;
  --brown-500: #9a5a2c;

  --sand-50:  #f8f6f2;
  --sand-100: #f0ebe4;
  --sand-200: #e3dcd2;

  --ink:   #263238;
  --body:  #3c474c;
  --muted: #5b6b72;

  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Type */
body, .font-sans {
  font-family: var(--font-body);
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, nav, .font-head {
  font-family: var(--font-head);
}
h1, h2, h3, h4 { color: inherit; letter-spacing: -0.01em; line-height: 1.2; }
h1 { letter-spacing: -0.02em; }
.text-gray-800 { color: var(--ink); }
.text-gray-700 { color: var(--body); }
.text-gray-600 { color: var(--muted); }

/* Brown accent (was green) */
.bg-green-600 { background-color: var(--brown-600); }
.hover\:bg-green-700:hover { background-color: var(--brown-700); }
.text-green-600 { color: var(--brown-600); }
.text-green-700 { color: var(--brown-700); }
.hover\:text-green-600:hover { color: var(--brown-600); }
.border-green-600 { border-color: var(--brown-600); }
.border-green-700 { border-color: var(--brown-700); }

/* Slate (was blue) */
.bg-blue-900 { background-color: var(--slate-800); }
.text-blue-700 { color: var(--slate-700); }

/* Warm neutrals (was cool gray) */
.bg-gray-50, .hover\:bg-gray-50:hover { background-color: var(--sand-50); }
.bg-gray-100, .hover\:bg-gray-100:hover { background-color: var(--sand-100); }
.border-gray-200 { border-color: var(--sand-200); }

/* Buttons and links */
a.bg-green-600, button.bg-green-600 { letter-spacing: 0.01em; }
:focus-visible { outline: 3px solid var(--brown-500); outline-offset: 2px; }
::selection { background: var(--brown-600); color: #fff; }