/* Design tokens. Single source of truth for colour, type, space, radius, shadow.
   Generated from an audit of the original styles.css, which carried 104 distinct colour
   literals -- 88 of them redundant variants of 16 colours. */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --green-900: #092d25;
  --green-800: #074334;
  --green-700: #0d6b50;  /* collapses 4 literals */
  --green-600: #3a6053;
  --green-500: #58766a;
  --ink: #18332f;
  --ink-soft: #45615b;
  --text-muted: #71857d;  /* collapses 22 literals */
  --text-subtle: #7f938b;  /* collapses 19 literals */
  --text-on-dark: #9bb9ac;  /* collapses 4 literals */
  --text-warm: #875a32;  /* collapses 3 literals */
  --text-warm-light: #a0774f;
  --text-warm-dark: #674b2d;
  --white: #fff;
  --surface-page: #fbf9f3;
  --surface-sunk: #f7f8f4;
  --surface-sand: #f0eee6;
  --surface-mint: #e7f1eb;  /* collapses 6 literals */
  --surface-blue: #e4f2f1;
  --surface-warm: #fff4e9;  /* collapses 2 literals */
  --surface-cream: #fff5df;  /* collapses 3 literals */
  --border: #dce7e0;  /* collapses 8 literals */
  --border-strong: #c9dbd3;  /* collapses 6 literals */
  --yellow: #f5c94b;  /* collapses 3 literals */
  --yellow-soft: #fff4bf;  /* collapses 3 literals */
  --yellow-pale: #ffe69a;
  --yellow-border: #f4d398;  /* collapses 2 literals */
  --orange: #ee774b;
  --orange-dark: #d95d38;
  --orange-pale: #f3c1ae;
  --blue: #0c8290;  /* collapses 2 literals */

  /* ---- overlays -------------------------------------------------------- */
  --overlay-white-90: rgba(255,255,255,.9);
  --overlay-white-80: rgba(255,255,255,.82);
  --overlay-white-70: rgba(255,255,255,.72);
  --overlay-white-35: rgba(255,255,255,.35);
  --overlay-white-20: rgba(255,255,255,.23);
  --focus-ring: rgba(245, 201, 75, .8);

  /* ---- type ------------------------------------------------------------ */
  --font-sans: "DM Sans", Arial, sans-serif;
  --font-display: Fraunces, Georgia, serif;

  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 22px;

  --display-sm: clamp(2.25rem, 4vw, 3.5rem);
  --display-md: clamp(2.45rem, 4vw, 4rem);
  --display-lg: clamp(2.7rem, 5vw, 5rem);
  --display-xl: clamp(3.25rem, 5vw, 4.55rem);

  /* ---- space ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- radius ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 99px;
  --radius-round: 50%;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, .12);
  --shadow-md: 0 18px 45px rgba(28, 55, 46, .12);
  --shadow-lg: 0 25px 80px rgba(4, 41, 32, .3);
  --shadow-focus: 0 0 0 3px rgba(13, 107, 80, .12);

  /* ---- hero tint --------------------------------------------------------- */
  /* Channel triplets so alpha can vary per gradient stop. Deep teal rather than
     green: the logo's wordmark is dark green, so a green tint gave 1.10:1 and no
     hue separation. Teal keeps the sea reading and separates by ~71 degrees. */
  --hero-tint-near: 3, 24, 38;
  --hero-tint-far: 4, 38, 56;
  --hero-base: #04202f;

  /* ---- layout ---------------------------------------------------------- */
  --shell-width: 1180px;
  --shell-gutter: 24px;

  /* ---- legacy aliases (page layers still reference these) -------------- */
  --green: var(--green-700);
  --green-dark: var(--green-800);
  --green-pale: var(--surface-mint);
  --blue-pale: var(--surface-blue);
  --cream: var(--surface-page);
  --line: var(--border);
  --shadow: var(--shadow-md);
  --radius: var(--radius-xl);
}

/* Breakpoints are documented here but must be literal in @media queries --
   custom properties are not valid in media conditions.
     --bp-lg: 1080px   large-desktop grid adjustments
     --bp-md:  900px   tablet: multi-column grids collapse
     --bp-sm:  720px   mobile: nav collapses, single column          */