/* Refresh Electrical — design tokens, shared by both page skins (2026-10-18).
   Moved out of refresh.css when the StudioArch skin arrived: that skin must
   not load refresh.css (its .navbar, .section and button rules would land on
   StudioArch's classes of the same names), but every Refresh component
   (ActionBar, forms, tiles, icons) reads these. Change a colour here. */
:root {
  --font-family--primary-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --color--primary-color: #f37321;
  --color--accent-text: #b54e00;
  --color--accent-on-dark: #f37321;

  --color--dark: #17171a;
  --color--black: #0c0a08;
  --color--background-dark: #17171a;
  --color--white: #fdfcfb;
  --color--background-light: #f4f2ef;
  --color--paper-band: #edeae5;
  --color--text-grey-secondary: #43434a;
  --color--text-grey-primary: #5c5c64;
  --color--line-gray: #dedad4;
  --color--very-light-gray: #edeae5;
  --color--lite-gray: #edeae5;
  --color--cool-gray: #797265;
  --color--paper-400: #c7c1b8;
  --color--background-gray: #17171a1a;

  /* Added 2026-09-27 (better-colors). Primitives, named for what they are:
       paper-300  one step lighter than paper-400, for paragraph text on ink:
                  APCA Lc 75.2 on #17171a and 76.1 on #0c0a08 (paper-400 is
                  68.6, short of body text's 75). Hue held at the paper's 78°.
       stone-500  a form field's edge: 3.05:1 on the #fdfcfb card, which is
                  what WCAG 1.4.11 asks of it. The hairline was 1.36:1, and a
                  field's fill is the card's colour, so the edge is all there is.
       red-600    errors: 5.10:1 on paper, 5.56:1 on white, OKLCH hue 27°
                  against copper's 53°, so an error no longer reads as brand. */
  --color--paper-300: #d3ccc3;
  --color--stone-500: #979189;
  --color--red-600: #b24039;

  /* ROLE NAMES for Refresh's own layer. The template's names above point the
     wrong way when you'd guess: text-grey-primary is the LIGHTER grey,
     cool-gray is warm, primary-color is the brand copper, and
     background-light doubles as the text colour on every dark band.
     styles.css reads those names, so they stay; new rules here and in
     components use these. */
  --re-accent: var(--color--primary-color);
  --re-text: var(--color--dark);
  --re-text-secondary: var(--color--text-grey-secondary);
  --re-text-muted: var(--color--text-grey-primary);
  --re-text-on-dark: var(--color--background-light);
  --re-text-on-dark-body: var(--color--paper-300);
  --re-text-on-dark-muted: var(--color--paper-400);
  --re-field-border: var(--color--stone-500);
  --re-error: var(--color--red-600);

  /* THE TYPE SCALE BELOW THE DISPLAY LINE, as three roles rather than thirteen
     ad-hoc values. Before 2026-09-22 every page file chose its own: section
     headings capped at 40/36/36/34/30/30px and row titles ran 30/28/26/24/22/21
     — eight sizes doing one job, which is what made the site read as assembled
     rather than designed. Anything that is a section heading, a row title or a
     displayed figure now takes one of these and nothing else.

       --re-heading  section headings — the Brand Kit's h2, 24 → 34px
       --re-title    row, card, question and step titles
       --re-figure   a displayed credential or contact figure

     Above these sit three display roles that stay distinct on purpose:
     .large-title (33 → 58; the homepage hero 33 → 52), .re-go-title on a
     landing photo (34 → 48) and .re-say-lead, the single statement moment on
     the homepage (28 → 52). */
  --re-heading: clamp(20px, 0.8rem + 1vw, 28px);

  /* CAPS HEADINGS (2026-09-27). Brisso liked the small labels' treatment
     ("What we do", "What happens if you call") and asked for it through the
     site: Archivo in capitals, open tracking, weight 500. Every heading now
     takes it. Capitals read larger than lower case at the same size, so the
     sizes step down (section headings were 24 to 34px light), and they need
     short lines: headings are six words or fewer, with the detail in the
     paragraph under them. Running text, FAQ questions and the homepage's one
     statement stay in sentence case; paragraphs in capitals read slowly. */
  --re-h-weight: 500;
  --re-h-tracking: 0.06em;
  --re-row: 15px;
  --re-row-tracking: 0.12em;
  --re-title: clamp(20px, 0.75rem + 0.8vw, 24px);
  --re-figure: 20px;

  /* MEASURE, IN ACTUAL CHARACTERS — and it is NOT `ch`.
     The CSS `ch` unit is the width of the digit zero, and Archivo's zero is
     much wider than its average letter: measured on the rendered face, 1ch
     buys 1.33 real characters. So the `max-width: 62ch` the pages were written
     with rendered about 73 characters, and the Brand Kit's "body copy stops at
     62" was never actually enforced anywhere. These are em-based, derived from
     the measured average character width (0.4272em), so they hold at 15px,
     16px or 18px without re-deriving. */
  --re-measure: 26.5em;       /* 62 characters */
  --re-measure-lede: 19.6em;  /* 46 characters */
  --re-measure-heading: 15em; /* about 26 characters of CAPITALS (11em while headings were lower case) */

  /* ONE EASING CURVE for everything that moves: reveals, the FAQ, every hover
     and press. Until 2026-09-27 the reveals ran on this curve and some twenty
     hovers on the browser's default `ease`, so the same page moved two ways. */
  --re-ease: cubic-bezier(.165, .84, .44, 1);

  /* Display is set LIGHT. Size and space carry the weight, not the stroke. */
  --_typography---heading-h1--font-weight: 300;
  --_typography---heading-h2--font-weight: 300;
  --_typography---heading-h1--letter-spacing: -0.015em;
  --_typography---heading-h2--letter-spacing: -0.015em;
  --_typography---heading-h3--font-weight: 400;
  --_typography---heading-h4--font-weight: 400;
  --_typography---paragraph--letter-spacing: 0;
  --_typography---paragraph--font-size: 17px;
  --line-height--line-height-xl: 160%;

  /* DISPLAY HEADINGS (2026-10-18, Brisso: "the site still feels flat and
     boring" → big headlines everywhere). Section headings on every page use
     these; the homepage runs a little larger. */
  --re-display: clamp(34px, 1.1rem + 3.4vw, 72px);
  --re-display-weight: 500;
  --re-display-tracking: -0.02em;
  --re-display-lh: 1.02;
  --re-display-page: clamp(42px, 1.3rem + 5vw, 104px);
}