/*
  Design tokens - the single place to theme the site.
  Loaded on every page (see Views/Shared/_Root.cshtml) before site.css, so both the home page
  and content pages share these values. Colors are placeholders until the brand palette is chosen.
*/
:root {
  /* Brand palette */
  --soa-ocean: #1b4f72;
  --soa-ocean-light: #2e86c1;
  --soa-kelp: #4f6f3d;
  --soa-rock: #4a4a4a;
  --soa-sand: #f4efe6;
  --soa-foam: #ffffff;

  /* Page backgrounds: the darker beige shows outside the 1440px page column, the lighter one behind <main>. */
  --soa-bg-body: #e9e4d6;
  --soa-bg-main: rgb(245, 241, 232);

  /* "Editorial Field Guide" design (chrome.css, pages.css) */
  --green-300: #a9cba3;
  --green-700: #2f5d3a;
  --green-900: #1b3524;
  --line: #dfe3d8;
  --ink-soft: #6b7166;
  /* Home page (home.css): text/paper, plus the per-phylum colour key (.k-green / .k-brown / .k-red) */
  --ink: #21261f;
  --paper: #f5f1e8;
  --green-500: #4f8a5b;
  --green-100: #e4efe2;
  --brown-900: #4f3014;
  --brown-700: #7a4b1c;
  --brown-500: #b07a33;
  --brown-300: #dcb682;
  --brown-100: #f2e6cf;
  --red-900: #54202a;
  --red-700: #7c2d39;
  --red-600: #955053;
  --red-500: #ae4c57;
  --red-300: #dba2a8;
  --red-100: #f3dcde;

  /* Type - Newsreader is loaded from Google Fonts in _Root.cshtml */
  --soa-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --soa-font-heading: "Newsreader", Georgia, "Times New Roman", serif;

  /* Layout */
  --soa-page-width: 1440px;   /* max width of any page's content; backgrounds stay full-bleed */
  --soa-content-width: 60rem; /* comfortable reading width for article text inside that */
  --soa-section-gap: 2rem;

  /* Bootstrap overrides (Bootstrap reads these at runtime) */
  --bs-primary: var(--soa-ocean);
  --bs-primary-rgb: 27, 79, 114;
  --bs-link-color: var(--soa-ocean-light);
  --bs-link-hover-color: var(--soa-ocean);
  --bs-body-font-family: var(--soa-font-body);
  --bs-body-color: var(--soa-rock);
}