/*
 * Design tokens — the single file a future rebrand (a new logo, a new
 * palette) has to touch. Every colour, font family and corner radius the
 * site renders resolves through one of these custom properties; the three
 * head-*.ejs partials wire their Tailwind config to these variables instead
 * of literal values, so nothing else in the app needs to change.
 *
 * Palette: earthy, soft, feminine — sage greens (primary), warm clay /
 * terracotta (secondary), honeyed amber (tertiary), warm ivory neutrals.
 * Pairs that carry body text keep WCAG AA contrast (>= 4.5:1) against the
 * surface they render on; see docs/theme.md for the pairs checked.
 */

:root {
  /* ---------------------------------------------------------- neutrals */
  --color-surface: #fbf8f3;
  --color-surface-dim: #e6dfd1;
  --color-surface-bright: #fbf8f3;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4eee2;
  --color-surface-container: #eee6d6;
  --color-surface-container-high: #e7decb;
  --color-surface-container-highest: #dfd5be;
  --color-surface-variant: #e3d8c4;
  --color-surface-tint: #4b6353;
  --color-on-surface: #2a241d;
  --color-on-surface-variant: #5c5345;
  --color-outline: #8c8066;
  --color-outline-variant: #d9ceb5;
  --color-background: #fbf8f3;
  --color-on-background: #2a241d;
  --color-inverse-surface: #342e24;
  --color-inverse-on-surface: #f4eee2;
  --color-inverse-primary: #a9cdae;

  /* ------------------------------------------------------- primary: sage */
  --color-primary: #2f6145;
  --color-on-primary: #ffffff;
  --color-primary-container: #2e4b3a;
  --color-on-primary-container: #86a290;
  --color-primary-fixed: #cfe4d2;
  --color-primary-fixed-dim: #c4dba0;
  --color-on-primary-fixed: #10251a;
  --color-on-primary-fixed-variant: #2c4536;

  /* --------------------------------------------------- secondary: clay */
  --color-secondary: #8b5a3c;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #ebd9c8;
  --color-on-secondary-container: #5c3c27;
  --color-secondary-fixed: #f0dcc9;
  --color-secondary-fixed-dim: #dcc1a6;
  --color-on-secondary-fixed: #3a2011;
  --color-on-secondary-fixed-variant: #6b4530;

  /* -------------------------------------------------- tertiary: honey */
  --color-tertiary: #8a5a20;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #6b4518;
  --color-on-tertiary-container: #d9ae78;
  --color-tertiary-fixed: #f7dfb8;
  --color-tertiary-fixed-dim: #e8c182;
  --color-on-tertiary-fixed: #3d2706;
  --color-on-tertiary-fixed-variant: #6b4518;

  /* ------------------------------------------- error (status, not brand) */
  --color-error: #b3261e;
  --color-on-error: #ffffff;
  --color-error-container: #f9dedc;
  --color-on-error-container: #8c1d18;

  /* -------------------------------------------------------------- fonts */
  --font-display: "Playfair Display";
  --font-body: "Plus Jakarta Sans";

  /* ------------------------------------------------------------- radii */
  --radius-default: 1rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-full: 9999px;
}