/* ==========================================================================
   Riverview Vets - tokens layer

   Filled at BLD-03 on 2026-09-17. Copied from the Claude Design export:
   _ds/riverview-vets-design-system-4809c4a8-4feb-433c-b774-bbc7c3d26c7f/
     tokens/{colors,typography,spacing,radius,elevation,motion}.css

   Six of the export's seven token files, concatenated in the order
   _ds/styles.css @imported them. Every declaration is exactly as exported,
   comments and all, so a later session can diff this against the design system
   and see that nothing has drifted. One change, and it is in comment text
   only: long dashes are written as hyphens throughout this repository, so the
   export's box-rule and em-dash characters are hyphens here. No value, no
   selector and no property is affected.

   tokens/fonts.css is DELIBERATELY NOT HERE. Its first line was a Google Fonts
   @import and its second served Judson as a 212 KB .ttf. BLD-06 replaced it
   with assets/css/fonts.css, which self-hosts both faces as WOFF2. The family
   names --font-sans and --font-serif ask for below are exactly the ones that
   file declares, so nothing in typography.css changes. See the header of
   fonts.css for the full reasoning.

   Cascade order, set in the <link> tags and deliberate:
     tokens -> fonts -> base -> layout -> components -> page
   tokens first because every later file reads its custom properties;
   components before page so a page rule can override a component one.
   ========================================================================== */


/* ==========================================================================
   colors.css
   ========================================================================== */

:root{
/* -- Brand palette - Brand Standards Manual p3 (2026 v2) --------
   "A palette rooted in nature & comfort." Six colours, in the
   manual's order. Suggested pairings:
   Grape + Sage · Teal + Coral · Sage + Peach · Teal + Lavender */
--teal:#347C7A; /* @kind color */
--sage:#A3D3B2; /* @kind color */
--grape:#784C89; /* @kind color */
--lavender:#D7C6CF; /* @kind color */
--coral:#FD724F; /* @kind color */
--peach:#FDA492; /* @kind color */

/* Logo green - the wordmark ink. Not in the five-colour palette,
   but it is the colour the mark is drawn in. */
--forest:#2B4537; /* @kind color */

/* Tints and shades, derived. Use for hover, tint panels and rules. */
--teal-800:#1F5150; /* @kind color */
--teal-600:#2C6A68; /* @kind color */
--teal-100:#E1EDEC; /* @kind color */
--sage-600:#6FA684; /* @kind color */
--sage-100:#EDF6F0; /* @kind color */
--grape-700:#5B3868; /* @kind color */
--grape-600:#6A4279; /* @kind color */
--grape-100:#EFE9F2; /* @kind color */
--lavender-100:#F6F1F4; /* @kind color */
--coral-700:#C64A2A; /* @kind color */
--coral-600:#E8562F; /* @kind color */
--coral-100:#FEE7E0; /* @kind color */
--peach-100:#FEF0EC; /* @kind color */
--forest-900:#1B2E24; /* @kind color */

/* Neutrals - warm, never blue-grey */
--cream-50:#FBF9F5; /* @kind color */
--cream-100:#F5F2EC; /* @kind color */
--cream-200:#EDE8DE; /* @kind color */
--cream-300:#DFD8C9; /* @kind color */
--ink-900:#17110E; /* @kind color */
--ink-700:#3A3A3A; /* @kind color */
--ink-500:#6B655D; /* @kind color */
--ink-300:#9C958B; /* @kind color */
--white:#FFFFFF; /* @kind color */

/* -- Semantic: surfaces -- */
--surface-page:var(--cream-100); /* @kind color */
--surface-card:var(--white); /* @kind color */
--surface-raised:var(--cream-50); /* @kind color */
--surface-sunken:var(--cream-200); /* @kind color */
--surface-inverse:var(--forest); /* @kind color */
--surface-accent:var(--coral); /* @kind color */
--surface-accent-soft:var(--coral-100); /* @kind color */
--surface-calm:var(--sage-100); /* @kind color */
--surface-teal:var(--teal); /* @kind color */
--surface-lavender:var(--lavender-100); /* @kind color */
--surface-grape:var(--grape); /* @kind color */
--surface-grape-soft:var(--grape-100); /* @kind color */

/* -- Semantic: text -- */
--text-heading:var(--forest); /* @kind color */
--text-body:var(--ink-700); /* @kind color */
--text-muted:var(--ink-500); /* @kind color */
--text-inverse:var(--cream-100); /* @kind color */
--text-accent:var(--coral-600); /* @kind color */
--text-link:var(--teal); /* @kind color */
--text-link-hover:var(--forest); /* @kind color */

/* -- Semantic: lines -- */
--border-hairline:var(--cream-300); /* @kind color */
--border-input:#B5B5B5; /* @kind color */
--border-strong:var(--forest); /* @kind color */
--border-subtle:rgba(43,69,55,.14); /* @kind color */
--focus-ring:var(--teal); /* @kind color */

/* -- Semantic: status -- */
--status-info:var(--teal); /* @kind color */
--status-info-bg:var(--teal-100); /* @kind color */
--status-success:var(--sage-600); /* @kind color */
--status-success-bg:var(--sage-100); /* @kind color */
--status-warning:#B4761F; /* @kind color */
--status-warning-bg:#FBEEDA; /* @kind color */
--status-danger:#B23A1C; /* @kind color */
--status-danger-bg:var(--coral-100); /* @kind color */
}


/* ==========================================================================
   typography.css
   ========================================================================== */

/* -- Typography - Brand Standards Manual p4 -----------------------
   "Clean, contemporary, confident." A modern, high-legibility
   sans-serif system. Never decorative or hand-scripted fonts for
   primary documentation.

   The manual specimens Manrope; the practice has since chosen
   FIGTREE as the primary face. The weight ladder below follows the
   manual: H1 Bold / H2 SemiBold / H3 Medium / Body Regular.
   Judson is retained only because the wordmark's "vets" is set in
   it - it is not a document face.                                 */
:root{
--font-sans:"Figtree","Helvetica Neue",Arial,sans-serif; /* @kind font */
--font-serif:"Judson",Georgia,serif; /* @kind font */

/* Sizes - from the Phase 1 landing page spec */
--fs-display:clamp(2.5rem,4.5vw,3.5rem); /* @kind font */
--fs-h1:3rem; /* @kind font */
--fs-h2:1.875rem; /* @kind font */
--fs-h2-sm:1.5rem; /* @kind font */
--fs-h3:1.25rem; /* @kind font */
--fs-h4:1rem; /* @kind font */
--fs-lead:1.1875rem; /* @kind font */
--fs-body:1rem; /* @kind font */
--fs-body-sm:0.875rem; /* @kind font */
--fs-caption:0.8125rem; /* @kind font */
--fs-eyebrow:0.6875rem; /* @kind font */

--lh-display:1.1; /* @kind font */
--lh-heading:1.2; /* @kind font */
--lh-snug:1.3; /* @kind font */
--lh-body:1.7; /* @kind font */
--lh-lead:1.55; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

--ls-display:-0.02em; /* @kind font */
--ls-heading:-0.01em; /* @kind font */
--ls-body:0em; /* @kind font */
--ls-eyebrow:0.16em; /* @kind font */

/* Semantic roles */
--type-display:var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-sans); /* @kind font */
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-display) var(--font-sans); /* @kind font */
--type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-sans); /* @kind font */
--type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans); /* @kind font */
--type-lead:var(--fw-regular) var(--fs-lead)/var(--lh-lead) var(--font-sans); /* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
--type-quote:italic var(--fw-regular) var(--fs-h3)/var(--lh-lead) var(--font-serif); /* @kind font */
--type-eyebrow:var(--fw-semibold) var(--fs-eyebrow)/1.2 var(--font-sans); /* @kind font */
}


/* ==========================================================================
   spacing.css
   ========================================================================== */

/* -- Spacing Scale (4px base) - Brand Standards Manual p9 ---------
   "Always select spacing values from this 4px step scale. Avoid
   arbitrary pixel measurements."
   Layout: 12-column grid · 24px gutter · 80px page margins        */
:root{
--sp-xs:4px; /* @kind spacing */
--sp-sm:8px; /* @kind spacing */
--sp-md:12px; /* @kind spacing */
--sp-lg:16px; /* @kind spacing */
--sp-xl:24px; /* @kind spacing */
--sp-xxl:32px; /* @kind spacing */
--sp-huge:48px; /* @kind spacing */
--sp-giant:64px; /* @kind spacing */

/* Off-scale multiples of 4, for section rhythm only */
--sp-section:72px; /* @kind spacing */
--sp-section-lg:96px; /* @kind spacing */

/* Layout framework */
--grid-columns:12; /* @kind other */
--grid-gutter:24px; /* @kind spacing */
--page-margin:80px; /* @kind spacing */
--width-content:1240px; /* @kind spacing */
--width-narrow:720px; /* @kind spacing */
--measure-prose:64ch; /* @kind spacing */

/* Semantic */
--space-stack:var(--sp-lg); /* @kind spacing */
--space-card-pad:var(--sp-xl); /* @kind spacing */
--space-card-pad-lg:var(--sp-xxl); /* @kind spacing */
}


/* ==========================================================================
   radius.css
   ========================================================================== */

/* -- Corner Radius Standards - Brand Standards Manual p9 ----------
   "Respect the radii standards. Clinical structures (cards, medical
   inputs) require strict square-to-subtle round edges (4px to 8px),
   never rounded pill elements."
   4px  → buttons & inputs
   8px  → cards & containers
   full → avatars & portraits ONLY                                  */
:root{
--radius-control:4px; /* @kind radius */
--radius-input:4px; /* @kind radius */
--radius-card:8px; /* @kind radius */
--radius-container:8px; /* @kind radius */
--radius-avatar:999px; /* @kind radius */
--border-width:1px; /* @kind spacing */
--border-width-strong:2px; /* @kind spacing */
}


/* ==========================================================================
   elevation.css
   ========================================================================== */

:root{
--shadow-none:none; /* @kind shadow */
--shadow-xs:0 1px 2px rgba(23,17,14,.06); /* @kind shadow */
--shadow-sm:0 2px 6px rgba(23,17,14,.06); /* @kind shadow */
--shadow-md:0 8px 24px -8px rgba(27,46,36,.18); /* @kind shadow */
--shadow-lg:0 20px 48px -16px rgba(27,46,36,.22); /* @kind shadow */
--shadow-press:inset 0 2px 4px rgba(23,17,14,.12); /* @kind shadow */
--shadow-focus:0 0 0 3px rgba(52,124,122,.35); /* @kind shadow */
}


/* ==========================================================================
   motion.css
   ========================================================================== */

:root{
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,.7,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,0,.3,1); /* @kind other */
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:380ms; /* @kind other */
--dur-page:600ms; /* @kind other */
--motion-hover:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); /* @kind other */
--press-scale:.97; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-page:0ms; /* @kind other */
--press-scale:1; /* @kind other */
}}


/* ==========================================================================
   Added at BLD-03. NOT from the export.

   Three values the export repeated as literals in 280 inline styles rather
   than naming. They are named here because every section reads them and a
   later edit to the page rhythm should be one line, not forty.

   --page-gutter and --section-y are the exact clamp() expressions the export
   used, transcribed not invented:
     padding: clamp(48px,7vw,96px) clamp(24px,5vw,80px)

   --nav-h is measured, not derived, and it is what `scroll-margin-top` in
   base.css subtracts so an anchor target does not land underneath the sticky
   header. Measured on the rendered page at 861, 900, 1024, 1440, 1920 and
   2560: the bar is 86.19px at every one of them, and 81px at or below 860.

   It used to be CONSTANT above 861, because the tallest thing in the bar was
   not the logo: the outline "Register your interest" button is 53.19px (1rem
   at line-height 1.7, plus 12px of padding and a 1px border each side) and
   never changes, and the logo topped out at 52.

   That stopped being true on 2026-09-22, when the client asked for a larger
   wordmark and layout.css took it to clamp(44px,5vw,58px). The logo passes
   the button at about 1064px viewport and caps at 58 from 1160px up, so the
   bar is 86.19px from 861 to 1064, grows to 91 across that band, and is
   91.00px from 1160 up. Re-measured, not computed, at 861, 900, 1020, 1064,
   1176, 1296 and 1436.

   87 -> 91 is the top of that range, so the value is right where the bar is
   tallest and 4.81px generous between 861 and 1064. That is the direction
   this token is allowed to be wrong in. Below 861 the 48px menu button is
   still the tallest and still gives 81.

   ONE THING THE 81 HAS NEVER DESCRIBED, noted 2026-09-22 rather than changed.
   These are index.html's numbers. The three legal pages have no mobile nav -
   `.site-header--legal` is the wordmark and a "Back to home" outline button -
   so the button is the tallest thing on them at EVERY width and their bar is
   86.19px all the way down, not 81. The token under-states it by 5.19 below
   861, and the `+ 12px` in base.css absorbs that with 6.81px to spare, which
   is why no anchor on those pages has ever landed under the bar.

   Re-measure if the header padding, the logo size or the button's type
   changes. Both values are rounded up, so the anchor lands a fraction low
   rather than a fraction under the bar.
   ========================================================================== */

:root {
  --page-gutter: clamp(24px, 5vw, 80px);
  --section-y: clamp(48px, 7vw, 96px);
  --nav-h: 81px;
}

@media (min-width: 861px) {
  :root { --nav-h: 91px; }
}