/* Projects RH: the firm's own design system.
   Identity values are copied verbatim from
   Tools/open-design/design-systems/projects-rh/tokens.css. No hex outside that
   palette appears anywhere in this build, so brand-lint passes by construction.

   Four brand pairs do not reach AA. Each is measured below and each has an
   in-palette substitute, so nothing here needs a new colour:

     --meta on white            4.42:1  -> large text (24px+) or non-text only
     --accent on --surface-tint 4.34:1  -> no teal text on the warm band
     --accent-soft as text      2.55:1  -> icon tint only, never a glyph
     --border as a control edge 1.49:1  -> decorative hairline only

   Contract: .design-refs/contrast-pairs.json */

@font-face { font-family:"Raleway"; src:url("assets/fonts/Raleway-300.woff2") format("woff2"); font-weight:300; font-display:swap; font-style:normal }
@font-face { font-family:"Raleway"; src:url("assets/fonts/Raleway-400.woff2") format("woff2"); font-weight:400; font-display:swap; font-style:normal }
@font-face { font-family:"Raleway"; src:url("assets/fonts/Raleway-500.woff2") format("woff2"); font-weight:500; font-display:swap; font-style:normal }
@font-face { font-family:"Raleway"; src:url("assets/fonts/Raleway-600.woff2") format("woff2"); font-weight:600; font-display:swap; font-style:normal }
@font-face { font-family:"Raleway"; src:url("assets/fonts/Raleway-700.woff2") format("woff2"); font-weight:700; font-display:swap; font-style:normal }
@font-face { font-family:"Roboto";  src:url("assets/fonts/Roboto-400.woff2")  format("woff2"); font-weight:400; font-display:swap; font-style:normal }
@font-face { font-family:"Roboto";  src:url("assets/fonts/Roboto-500.woff2")  format("woff2"); font-weight:500; font-display:swap; font-style:normal }
@font-face { font-family:"Roboto";  src:url("assets/fonts/Roboto-700.woff2")  format("woff2"); font-weight:700; font-display:swap; font-style:normal }

:root {
  /* Every value below is verbatim from the design system. The sections are
     grouped to match the eight token groups the platform database stores, so
     the CSS and the design-system table cannot describe the palette
     differently. */

  /* ── ground and surfaces ─────────────────────────────────────────── */
  --bg:            #ffffff;   /* white is the page */
  --surface:       #f9f9f9;
  --surface-warm:  #f5f5f5;
  --surface-tint:  #e5e3df;   /* the one warm band. No teal text on it */

  /* ── ink on the ground ───────────────────────────────────────────── */
  --fg:            #000000;
  --fg-2:          #394a58;   /* headings, slate bands. 9.15:1 on white */
  --fg-3:          #474444;   /* body and small text. 9.64:1 on white */
  --meta:          #6b7a85;   /* 4.42:1. LARGE TEXT OR BORDERS ONLY */

  /* ── accent ──────────────────────────────────────────────────────── */
  --accent:        #007570;   /* 5.56:1 on white. Links, primary fill, eyebrows */
  --accent-on:     #ffffff;   /* 5.56:1 on accent */
  --accent-hover:  #006661;   /* 6.83:1 on white */
  --accent-active: #00504c;
  --accent-soft:   #52b394;   /* iconography tint only, never a glyph */
  --accent-tint:   #d6efe9;   /* pill grounds. Teal on it is 4.60:1 */

  /* ── the validation ribbon ────────────────────────────────────────────
     Gold, for that one garment and nothing else (Matthew, 30 September
     2026: "a colored gold ribbon"). Black on --gold is 9.4:1; --fg-2 on
     --gold-pale is 7.7:1. In the brand's tokens.css since the same day. */
  --gold:          #d4a72c;
  --gold-deep:     #a67c12;
  --gold-pale:     #f6ecc9;

  /* ── rules ───────────────────────────────────────────────────────── */
  --border:        #d0d5d2;   /* decorative hairline. Never a control edge */
  --border-soft:   #ededed;
  --divider:       #d0d0d0;

  /* ── type ─────────────────────────────────────────────────────────── */
  /* Raleway carries the surface; Roboto takes eyebrows, captions and figures.
     The brand ramp is fixed-size; these clamp between the brand value and a
     smaller phone value so nothing overflows at 390px. */
  --font-display:    "Raleway", system-ui, -apple-system, sans-serif;
  --font-body:       "Raleway", system-ui, -apple-system, sans-serif;
  --font-supporting: "Roboto", system-ui, sans-serif;

  /* Topped out at 56px. Measured on one reference site, the equivalent
     line is 64px on a 900px measure at -0.04em, and on another 48px. Raised
     the ceiling to 64px and tightened the display track to -0.03em, which is
     where Raleway at this size stops reading as loose. The phone floor is
     unchanged in effect: 4.8vw crosses 2.25rem only above 750px. */
  --type-display: 600 clamp(2rem, 4.8vw, 4rem)/1.06 var(--font-display);
  --type-h1:      600 clamp(1.875rem, 3.4vw, 2.5rem)/1.15 var(--font-display);
  --type-h2:      600 clamp(1.5rem, 2.4vw, 1.875rem)/1.20 var(--font-display);
  --type-h3:      500 1.375rem/1.30 var(--font-display);
  --type-body:    400 1rem/1.55 var(--font-body);
  --type-body-lg: 400 1.125rem/1.55 var(--font-body);
  --type-caption: 500 0.875rem/1.45 var(--font-supporting);
  --type-eyebrow: 600 0.75rem/1.30 var(--font-supporting);

  --track-display: -0.03em;
  --track-eyebrow:  0.10em;

  /* ── the public pages' larger scale ─────────────────────────────────────
     Bigger icons and bigger text, one idea to a screen. These sit
     beside the ramp above rather than replacing it, because the signed-in
     workspace shares this file and keeps the smaller one. A pane heading tops
     out at 44px against a 30px h2; the lead and the body each go up a step. */
  --type-h2-xl:   600 clamp(1.75rem, 3.3vw, 2.75rem)/1.12 var(--font-display);
  --type-h3-xl:   600 clamp(1.25rem, 1.7vw, 1.5rem)/1.25 var(--font-display);
  --type-lead-xl: 400 clamp(1.125rem, 1.45vw, 1.3125rem)/1.5 var(--font-body);
  --type-body-xl: 400 1.0625rem/1.6 var(--font-body);

  /* ── gradient grounds ─────────────────────────────────────────────────
     Mixed from the palette above and from nothing else, so they add no colour
     to the brand. Neighbouring sections never share one. */
  --grad-mist:  linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  --grad-wash:  linear-gradient(158deg, color-mix(in srgb, var(--accent-tint) 62%, var(--bg)) 0%, var(--bg) 64%);
  --grad-warm:  linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 58%, var(--bg)) 0%, var(--bg) 100%);
  --grad-slate: linear-gradient(135deg, var(--fg-2) 0%, color-mix(in srgb, var(--fg-2) 74%, var(--accent-active)) 100%);
  --grad-deep:  linear-gradient(135deg, var(--accent-active) 0%, var(--fg-2) 72%);

  /* ── the grid: space and containers ───────────────────────────────── */
  --container-narrow: 680px;
  --container-base:  1120px;
  --container-wide:  1280px;
  /* The section rhythm was 64-96px. Measured on a reference site, the
     band padding is a flat 128px top and bottom at 1440, and that spacing is
     most of why a page with less content than this one reads as calmer. Raised
     to 80-128px, which lands on 128 at 1440 and stays at 80 on a phone where a
     128px gutter would push a whole screen of air between two paragraphs. */
  --section-y:       clamp(5rem, 8.9vw, 8rem);
  --section-y-tight: clamp(3.5rem, 5.6vw, 5rem);
  --gutter:          clamp(1.25rem, 3vw, 2rem);
  --measure:         68ch;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  /* ── corners and elevation ────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  /* Elevation is rationed: the brand uses one card shadow, not a stack. */
  --elev-ring: 0 0 0 1px var(--border);
  --elev-card: 0 1px 2px rgba(57, 74, 88, 0.06), 0 4px 12px rgba(57, 74, 88, 0.06);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  /* ── motion ───────────────────────────────────────────────────────── */
  /* DESIGN.md section 6 permits 150-200ms ease-out on state only, and forbids
     scroll choreography. The brief asked for animation explicitly, so this build
     adds two longer durations for once-only reveals and the one scroll piece on
     the homepage. That override is recorded in .design-refs/DECISIONS.md.
     Everything still reaches its final state with no JavaScript. */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-reveal: 520ms;
  --motion-draw:   900ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms; --motion-base: 1ms; --motion-reveal: 1ms; --motion-draw: 1ms;
  }
}