/* Alfie, the marketing site: the values it is drawn from.

   This file is the marketing site's own core. site/tokens.css is the
   product's, and the two are separate on purpose: four app entries and eight
   browser tests import tokens.css, so a value moved there moves the product.
   Nothing in here is imported by anything under app/. Every name is prefixed
   --f- (form), except font sizes, which keep the --text- prefix because that
   is what check 6 of scripts/check_tokens.py resolves when it enforces the
   16px floor, and a size it cannot resolve is a size it cannot check.

   The idea in one line: the page is a form, not a page with forms on it.
   Every value here comes off a real object in a Florida ALF's filing
   cabinet. Nothing is here because it looked nice next to the last one.

   scripts/check_tokens.py holds this file to the same rules as tokens.css:
   hexes and font stacks live here and nowhere else, every token defined here
   is read by something, and no two motion durations are equal.
*/

:root {
  /* --- Colour: six values and a ruling grey ------------------------------

     Manila, copier paper, toner, ballpoint, highlighter. That is the whole
     list, and there is no second hue anywhere on the site.

     Measured against WCAG AA, which is 4.5:1 for text:
       toner on sheet   21.0:1
       toner on folder  10.6:1
       faded on sheet    8.9:1
       pen on sheet      7.9:1
       toner on marker  16.1:1

     ONE RULE THAT IS NOT OBVIOUS: --f-faded goes on --f-sheet and never on
     --f-folder. It measures 4.51:1 on manila, which passes AA by a hundredth
     and is not a margin worth carrying. Secondary text belongs on the sheet.
  */

  /* Manila folder stock. ONE OBJECT WEARS IT: the tab on the staff file.
     It was the whole page ground until 2026-09-09, and it read as a costume.
     A flat tan fill is not a material, and spending the loudest colour on the
     surface behind everything left nothing for the grid and the type to do. */
  --f-folder: #c8b78e;

  /* Copier paper. The form, and now the surround as well: white on white,
     with the sheet's keyline the only thing dividing them. Not off-white,
     because the cream the rest of the web is built on is the thing this
     redesign was called to get away from. */
  --f-sheet: #ffffff;

  /* Third-generation photocopy. The Statement of Deficiencies excerpt and
     nothing else, so a quoted public document reads as a copy of a document
     rather than as another of our own boxes. Neutral, not warm. */
  --f-copy: #eeedea;

  /* Toner. Printed rules and printed type. Black, not a tinted near-black:
     #0b0b0b and #111 are what a screen design reaches for, and a form is
     printed by a machine that only has the one colour. */
  --f-toner: #000000;

  /* Toner that did not take. Secondary text, on the sheet only. */
  --f-faded: #4a4a44;

  /* Ballpoint. Everything a person wrote in by hand. */
  --f-pen: #2b4a9b;

  /* Highlighter. The one loud thing on the page, and it means one thing:
     look here, this box is empty.

     THE VALUE IS THE PRODUCT'S --yellow ON PURPOSE. app/web/test/helpers/
     budgets.ts counts yellow marks by comparing against the literal
     rgb(255, 225, 77), and scripts/site-audit.mjs asserts the exact list it
     finds. A prettier, more acid yellow here would make that check find
     nothing and pass, which is a live check guarding a page it can no longer
     see. It is also the yellow already in og.png, which the brief points at. */
  --f-marker: #ffe14d;

  /* Pencil ruling. The light rules inside a grid, never type.
     3.6:1 on the sheet, which clears WCAG's 3:1 floor for a boundary
     somebody has to see to read the grid. */
  --f-hair: #8b8578;

  /* --- Rules: the width is the information ------------------------------

     Three weights and each says something different. Nothing else on this
     site has a border at all.

       --f-rule-heavy  bounds a part of the form
       --f-rule        bounds a field or a cell you have to read
       --f-hair        divides rows inside a grid, guiding the eye only
  */
  --f-rule: 1px;
  --f-rule-heavy: 2px;

  /* --- Type: two families, divided the way a form is divided -------------

     Public Sans is the US Web Design System's typeface and a descendant of
     Libre Franklin, which is to say of the Franklin Gothic that American
     public forms have been set in for a century. It is here for that reason
     and not because it is a neutral sans.

     Courier Prime is a typewriter. It carries what was typed into the form:
     dates, tag codes, counts, the record's own grid. On a paper MAR the
     headings are printed and the values are typed or written, and keeping
     that division is most of what makes this read as a document.

     Caveat is the third file and it is texture, not a family in the system.
     It draws initials inside the medication record and nothing else, and it
     carries no meaning: every mark it makes is also stated in printed text.
  */
  --f-print: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Its x-height is 0.451 of the em against Public Sans's 0.517, so anywhere
     the two sit side by side at one size, the Courier needs font-size-adjust
     to stop it looking a size smaller. styles.css carries that rule. */
  --f-typed: "Courier Prime", ui-monospace, "Courier New", monospace;
  --f-hand: "Caveat", "Segoe Script", cursive;

  /* FOUR SIZES. It was six, and --text-form-lead at 19px and
     --text-form-sub at 18px were both a step nobody could see against a 17px
     body: three sizes inside 2px is the compression a ramp exists to stop.
     The lead paragraph is set at the heading size in book weight instead,
     which is a difference a reader can actually see.

     A form's title, not a landing page's display type. The loud thing on
     this page is a highlighter ring round an empty box, and a headline at
     70px would be arguing with it.

     Two decisions rather than a clamp: a clamp cannot land on a baseline,
     and 28px is picked for a phone and 44px for a desk. The desk value is
     set in the media query at the foot of this file. */
  --text-form-title: 1.75rem;
  --text-form-head: 1.375rem;
  --text-form-body: 1.0625rem;

  /* Courier at 16px, the floor. It sets codes, dates and counts, never a
     sentence: if it reads as prose it is Public Sans, however small. */
  --text-form-data: 1rem;

  /* --- The rhythm -------------------------------------------------------

     Vertical space on this page is a multiple of 4px, and running prose sits
     on a 28px line: 17 x 1.647 is 28.0, seven units. Paragraph gaps are one
     line, so successive paragraphs keep the rhythm rather than drifting.
     Headings take 22 x 1.273, which is 28 again.

     This is not a full baseline grid and does not claim to be one. A page
     carrying tables, reproductions and a headline at two sizes cannot hold
     every line to it, and chasing that is where the time goes for no gain.
     What it does hold is the part a reader sees: prose in two columns beside
     each other lines up. */
  --f-leading-prose: 1.647;
  --f-leading-tight: 1.273;
  /* 16 x 1.5 is 24, six units. Captions and small print. */
  --f-leading-caption: 1.5;

  /* --- Measures ---------------------------------------------------------
     Four, and a form does not need a fifth. */
  --f-row: 0.5rem;
  --f-gut: 1rem;
  --f-gut-lg: 1.5rem;
  --f-block: 2.5rem;

  /* The sheet's side margin, written once and read by everything that has to
     agree with it: a part's padding, the negative margin a grid uses to run
     to the sheet's edge, and the head band that spans it. It was typed in
     five places and repeated in a media query, which is how the register
     table came to overflow a 375px screen by 5px. */
  --f-pad: var(--f-gut);

  /* The sheet is a sheet: it stops, and its keyline is what says so now that
     what surrounds it is the same white. */
  --f-sheet-w: 46rem;
  /* About 66 characters at 17px, which is where prose stops being easy. It
     is a ceiling on a part that has no note beside it; inside the grid the
     columns decide. */
  --f-measure: 34rem;

  /* SIX COLUMNS, written once. Everything that shares a line on this page
     hangs off it: prose takes four, the note rail beside it takes two, and
     the rules run the width of all six. Twelve would be over-engineering a
     46rem sheet, where a column would come out under 40px wide. */
  --f-grid: repeat(6, minmax(0, 1fr));

  /* --- Motion: one moment -----------------------------------------------

     The highlighter ring draws itself around the blank box, once, and that
     is every animation on this site. Nothing fades in on scroll, nothing
     lifts on hover, nothing loops.

     --t-marker joins the product's --t- family so check 5 of check_tokens.py
     holds it apart from the rest: no two durations on either system may be
     equal, because one duration everywhere is docs/ai-tells.md item 33.
  */
  --t-marker: 520ms;
  --f-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The one value that changes with the window, and it changes once. */
@media (min-width: 40rem) {
  :root {
    --text-form-title: 2.75rem;
    --f-pad: var(--f-gut-lg);
  }
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("/fonts/courier-prime-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-marks.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}