/* DoulaFlow colour tokens and band scopes.
 *
 * Every page links this file, including the two that do not use site.css. It only
 * declares custom properties and two band scopes, so it applies no layout of its own
 * and cannot move a page. The band classes are almost entirely property overrides;
 * they live here because every page links this file and only some link site.css.
 *
 * Names describe the role, not the colour. A value-based name stops being true the
 * moment the value changes, and this palette has already changed once: these were
 * --wine, --plum, --rose and so on until 2 September 2026.
 *
 * Palette decided in MESSAGING.md section 9. Source is an Orange Rose Photography
 * brand board, chosen because it reads as Stardew Valley's autumn: a warm ground,
 * amber and olive through the middle. The accent was a purple until 2 September 2026;
 * it is now the deep rust, which matches the logo's family and clears AA at 5.7:1 where
 * the brighter #BC5727 is 3.8:1 and fails as link and button-label text. Every value was measured against six competitors with
 * palette-check.py and contrast-checked against the ground.
 *
 * Contrast figures below are against --ground. AA needs 4.5:1 for body text and 3:1
 * for large text and borders.
 */

:root {
  /* accents */
  --accent:      #943F20;  /* primary. links, buttons, emphasis.        5.7:1  */
  --accent-dark: #79341A;  /* hover and pressed states.                 7.4:1  */
  --rust:        #BC5727;  /* warm accent. fills and large type only.   3.8:1
                              NEVER small text: this is below AA.              */
  --gold:        #CE953D;  /* decorative and data only.                 2.1:1  */
  --sage:        #BAB68D;  /* decorative and data only.                 1.7:1  */

  --demo:        #5C2D3E;  /* the plum. Demo CTAs + founding badge.     9.0:1  */
  --demo-dark:   #47222F;  /* hover.                                          */

  /* text, darkest to lightest */
  --text:        #4A391D;  /* body.                                     9.0:1  */
  --text-2:      #645D3D;  /* secondary body.                           5.4:1  */
  --text-3:      #6B5430;  /* footer and tagline.                       5.8:1  */
  --label:       #943F20;  /* eyebrows and small uppercase labels.      5.7:1  */

  /* lines and surfaces */
  --border:      #887F61;  /* borders that need to be seen.             3.3:1  */
  --rule:        #D0C0A6;  /* hairlines and dividers.                   1.5:1  */
  --surface-2:   #EBDDC1;  /* quietest surface.                                */
  --surface:     #EED6B0;  /* cards and panels.                                */
  --ground:      #F6E6CD;  /* the page.                                        */

  /* Component triplets, for the places that need a colour with alpha: shadows and the
     translucent sticky-nav backdrop. rgba() cannot take a hex token, so these carry the
     same values as "r, g, b" and are used as rgba(var(--x-rgb), .12). Without them 192
     rgba() literals sat outside the token system and silently kept the old palette. */
  --demo-rgb:    92, 45, 62;   /* the plum, for tints. see --accent-rgb */
  --accent-rgb: 148, 63, 32;
  --ground-rgb: 246, 230, 205;
  --text-rgb:   74, 57, 29;

  /* band backgrounds. Same values as --text-2 and --accent today, but a distinct
     role, and they have to be separate tokens: a rule that redeclares --accent cannot
     also read the outer --accent, because custom properties resolve against the
     element's own declarations first. */
  --band-olive:  #645D3D;
  --band-accent: #943F20;

  /* ------------------------------------------------------------------ type
   *
   * The families, so a change happens once rather than in the 190-odd literal
   * declarations these replaced. Tokenised on 8 September 2026, for the same reason
   * the colours were: the names were spread across 31 pages' inline <style> blocks
   * and two generators, and no single edit could reach them all.
   *
   * These are names only. The @font-face rules that actually load the files live in
   * site.css, and the four pages that do not link it (index, get-paid and the two
   * social-src templates) carry their own copies. A new family needs both: the token
   * changed here, and the @font-face src pointed at the new woff2 in all five places.
   *
   * Every page links this file, so a bare var() is safe here. Do not add a fallback
   * inside the var() -- a second copy of the family name is the thing being removed.
   *
   * --font-display was Playfair Display until 8 September 2026, then Archivo for about
   * an hour. Archivo was a grotesque and read cold against a script logo and a cream
   * ground; Petrona is a warm serif that keeps the elegance without the formality.
   *
   * --font-accent exists because of that Archivo hour. A grotesque display face and
   * DM Sans are the same texture at 15px, so the 29 smallest display uses -- the footer
   * tagline on all 24 pages, the get-paid step numerals, three bits of home-page mock
   * UI -- were split off and kept on Playfair to preserve the contrast.
   *
   * Petrona removed that reason: it IS a serif, so it separates from DM Sans at any
   * size. Accent and display became two serifs doing one job, and Playfair was costing
   * 60KB across two files and five @font-face blocks to set one footer line, so it was
   * retired on 8 September 2026 and both tokens now point at Petrona.
   *
   * The two tokens are kept pointing at the same family on purpose. The split is the
   * seam that lets the small decorative text and the headings disagree again later
   * without a site-wide find-and-replace -- it is how Archivo became Petrona in one
   * edit, and it is where a second face would go if one is ever wanted for the small
   * type. Setting --font-accent is a one-line change; re-deriving which 29 rules it
   * covers is not.
   *
   * Display weight is 600, not the 400 Playfair used. Rules that never declared a
   * weight were inheriting 400 and looked thin next to the 600 headings, so the
   * numerals and titles among them now say 600 outright. The two quote-shaped ones
   * (about-us's pull quote and founder signature) still inherit.
   */
  --font-display: 'Petrona', serif;            /* headings and display numerals */
  --font-accent:  'Petrona', serif;            /* the small display text        */
  --font-body:    'DM Sans', sans-serif;       /* body, UI, buttons             */
  --font-script:  'Caveat', cursive;           /* the handwritten annotations   */
}

/* ---------------------------------------------------------------- band scopes
 *
 * A section that inverts: full-strength colour, light text. This is what stops the
 * page reading as one flat cream sheet, and it is the condition the cream ground's
 * accepted collision in palette-check.py depends on.
 *
 * Only the text and line roles flip. --ground, --surface and --surface-2 keep their
 * values, so a card inside a band still has a light surface to sit on.
 *
 * Inside a band the only text colours clearing AA are the light neutrals: gold is
 * 2.5:1 on olive and rust is 1.4:1, so neither can carry text here.
 */
.band-olive,
.band-accent {
  --text:    var(--ground);     /* 5.4:1 on olive, 5.7:1 on accent */
  --text-2:  var(--surface);    /* 4.7:1 / 4.9:1 */
  --text-3:  var(--surface-2);  /* 4.9:1 / 5.2:1 */
  --label:   var(--ground);
  --accent:  var(--ground);     /* links: rust on rust would vanish */
  --rule:    rgba(246, 230, 205, 0.22);
  --border:  rgba(246, 230, 205, 0.40);
  color: var(--ground);
}
.band-olive  { background: var(--band-olive); }
.band-accent { background: var(--band-accent); }

/* the primary button reads background:var(--accent), which the override above turns
   into ground-on-ground. It has to invert explicitly. */
.band-olive  .df-btn-primary { background: var(--ground); color: var(--band-olive); }
.band-accent .df-btn-primary { background: var(--ground); color: var(--band-accent); }
.band-olive  .df-btn-primary:hover,
.band-accent .df-btn-primary:hover { background: var(--surface); }
.band-olive  .df-btn-ghost,
.band-accent .df-btn-ghost { color: var(--ground); border-color: var(--border); }

/* ------------------------------------------------------------- the demo button
 *
 * Plum was the primary accent until 2 September 2026 and was retired because it sits
 * 9.2 from DoulaBub's wine. It comes back in a strictly secondary job: the six CTAs
 * that ask for a demo rather than a trial.
 *
 * That is the whole point of it. Rust means start the trial yourself, plum means talk
 * to a person. Those are different asks and were previously the same colour.
 *
 * It is an outline rather than a solid, deliberately. Booking a demo should never be
 * the loudest thing on a page: the rust "Start free trial" solid sits in the nav of
 * every page, and two solids of equal weight make the reader choose between them.
 *
 * The collision is acceptable only while it stays this small. Six buttons is not an
 * identity. If plum starts carrying anything else, re-check palette-check.py.
 */
.df-btn-demo {
  background: transparent;
  color: var(--demo);
  border: 1.5px solid var(--demo);
  padding: 12.5px 26px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .2s, color .2s;
}
.df-btn-demo:hover { background: var(--demo); color: var(--ground); }