/* Room for Help — design tokens (v1 beta)
   Single source of truth. No raw hex, font names or radii elsewhere in the theme.
   Replaces the navy/teal tokens extracted from mockup.html. */

/* Figtree is self-hosted. The handed-over file loaded it with
   @import url("https://fonts.googleapis.com/css2?...Figtree..."), which was
   replaced here for three reasons: a CSS @import is render-blocking and
   serialised behind this stylesheet, the request discloses every visitor's IP
   to a third party on a site whose pitch is that it does not do that, and the
   theme already ships the variable file. Weights 400-700 come from one file. */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- color ---------- */
  --rfh-ground:        #FFFFFF;  /* page background */
  --rfh-surface:       #F6F7F7;  /* panels, input fills, console background */
  --rfh-warm:          #FAF7F2;  /* soft ivory: section bands and inset panels on
                                    public pages. Client direction, 14 Oct 2026. */
  --rfh-line:          #DFE3E6;  /* hairlines, dividers */
  --rfh-ink:           #14212E;  /* headings and body */
  --rfh-ink-2:         #55626F;  /* secondary text. Never body copy */
  --rfh-accent:        #0C7C77;  /* primary buttons, links, active */
  --rfh-accent-press:  #095F5B;  /* hover, pressed */
  --rfh-accent-tint:   #E4F3F2;  /* selected fills, positive chips */
  --rfh-caution:       #9A4A06;
  --rfh-caution-tint:  #FCEFDD;
  --rfh-stop:          #A3261E;
  --rfh-stop-tint:     #FBE9E7;
  --rfh-focus:         #14212E;  /* 2px ring, 2px offset */
  --rfh-on-ink:        #D5DBE0;  /* body copy on the ink band. From the design reference. */
  --rfh-field-line:    #8A96A1;  /* input borders. Darker than --rfh-line so controls
                                    are distinguishable, per the design reference. */

  /* Home page v2, 26 Oct 2026. Added; nothing above changed. */
  --rfh-ivory:         var(--rfh-warm); /* the same soft ivory, by the name the design uses */
  --rfh-line-warm:     #E7E1D6;  /* hairlines on ivory and on white panels beside it */
  --rfh-navy:          #0B1F3A;  /* the logo's navy: the closing panel. White text 16.5:1 */
  --rfh-accent-bright: #3CC2B5;  /* teal for use on navy only (7.5:1 either way round).
                                    Never on white or ivory, where it fails contrast. */

  /* ---------- type ---------- */
  --rfh-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --rfh-display: 700 3.75rem/4rem var(--rfh-font);       /* 60/64, tracking -0.02em */
  --rfh-h2:      700 2.25rem/2.625rem var(--rfh-font);   /* 36/42, tracking -0.01em */
  --rfh-h3:      600 1.375rem/1.75rem var(--rfh-font);   /* 22/28 */
  --rfh-body:    400 1.125rem/1.75rem var(--rfh-font);   /* 18/28 */
  --rfh-small:   500 0.9375rem/1.375rem var(--rfh-font); /* 15/22 */
  --rfh-label:   600 0.8125rem/1rem var(--rfh-font);     /* 13/16, uppercase, tracking 0.06em */

  --rfh-track-display: -0.02em;
  --rfh-track-h2:      -0.01em;
  --rfh-track-label:    0.06em;

  /* ---------- space (4px base) ---------- */
  --rfh-1: 4px;   --rfh-2: 8px;   --rfh-3: 12px;  --rfh-4: 16px;
  --rfh-6: 24px;  --rfh-8: 32px;  --rfh-12: 48px; --rfh-16: 64px;
  --rfh-24: 96px;

  --rfh-container: 1200px;
  --rfh-gutter: 24px;

  /* ---------- shape ---------- */
  --rfh-radius-panel: 24px;  /* the large inset panel, e.g. the signup card */
  --rfh-radius-card:  16px;
  --rfh-radius-field: 12px;
  --rfh-radius-pill:  999px;

  /* ---------- elevation: floating elements only ---------- */
  --rfh-float: 0 8px 28px rgba(20, 33, 46, 0.14);

  /* ---------- controls ---------- */
  --rfh-control-h: 52px;
  --rfh-tap-min:   44px;

  /* ---------- motion ---------- */
  --rfh-ease: cubic-bezier(0.2, 0, 0, 1);
  --rfh-fast: 120ms;
}

@media (max-width: 720px) {
  :root {
    --rfh-display: 700 2.5rem/2.75rem var(--rfh-font);   /* 40/44 */
    --rfh-h2:      700 1.75rem/2.125rem var(--rfh-font); /* 28/34 */
    --rfh-gutter: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rfh-fast: 0ms; }
}