/* Lindale: the palette, the type and the spacing, and nothing else. Every
   value the site draws with is named here. `site.css` builds the pages out of
   these and adds no colours of its own.

   Two grounds, and only two: the cream page and the dark brand band that the
   header, the hero and the footer sit on. The dark band is written out in full
   below rather than derived, because it is the app's identity and not a step
   on a scale.

   The two tonal ramps are generated in OKLCH on one shared lightness scale, so
   step 400 of one weighs the same as step 400 of the other. The accent ramp
   walks from the gold of the app icon to its ember; the second ramp is the
   pine of the header. Both belong to the app, which is the point: a tint on
   this page should look like it came off the icon. */

:root {
  /* The cream ground and the ink on it. */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* The dark brand band. Literal, because it is the identity. */
  --brand-pine: #0a3a30;
  --brand-pine-deep: #062d27;
  --brand-navy: #05111d;
  --brand-cream: #f4ece0;
  --brand-sage: #a9bcb0;
  --brand-dim: #7d8f86;
  --brand-gold: #f1ca79;
  --brand-gold-bright: #f8dfae;
  --brand-ember: #f08035;

  /* Warm neutrals, for text and quiet surfaces on the cream page. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  /* Gold into ember. Steps 700 and darker are the ones safe to set text in. */
  --color-accent-100: #fbf4e6;
  --color-accent-200: #f5e6ca;
  --color-accent-300: #ecd0a0;
  --color-accent-400: #deae67;
  --color-accent-500: #cc8730;
  --color-accent-600: #b36303;
  --color-accent-700: #8f4600;
  --color-accent-800: #6a2f03;
  --color-accent-900: #461e07;

  /* The header's pine, carried onto the light page. */
  --color-accent-2-100: #edf8ef;
  --color-accent-2-200: #d7efde;
  --color-accent-2-300: #badfca;
  --color-accent-2-400: #95c4ae;
  --color-accent-2-500: #71a592;
  --color-accent-2-600: #538678;
  --color-accent-2-700: #3c675c;
  --color-accent-2-800: #284a43;
  --color-accent-2-900: #19302c;

  /* Headings are Newsreader at a single regular weight. There is no bold
     display face anywhere, on purpose: a heavy one was tried and rejected. */
  --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --heading-track: -0.015em;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}