/* =========================================================================
   LBI EXTERIOR CLEANERS
   tokens.css — the single source of truth for the visual system.

   Every other stylesheet reads from here. Change a value once and it changes
   across every generated page.

   DO NOT put component styles in this file. Only tokens.

   THE IDEA, briefly, so nobody repaints it by halves.
   A field guide to a dirty island house, printed as a poster. Bone paper,
   cedar-shadow green, one chalk-yellow signal, and type big enough to read
   across a room. The site is about looking at surfaces, so the surfaces are
   flat colour bands rather than cards floating on a gradient.
   ========================================================================= */

:root{

  /* ---------------------------------------------------------------------
     COLOUR
     Bone is the page. Pine is the brand field — headers, bands, the footer.
     Chalk yellow is the one signal colour, and it ALWAYS carries dark text;
     it is never a background for white type and never a link colour.
     Moss is the interactive green: buttons, links, focus.
     --------------------------------------------------------------------- */
  --bone:#F4F0E6;
  --bone-2:#EAE4D6;
  --bone-3:#DED6C4;
  --paper:#FFFDF8;

  --pine-950:#0D1712;
  --pine-900:#16241F;
  --pine-800:#1E362C;
  --pine-700:#2A4A3B;

  --moss-600:#2F7D57;
  --moss-700:#245C42;
  --moss-500:#3E9A6C;

  --sun:#EFC75E;
  --sun-2:#E3B43C;
  --sun-ink:#241D06;      /* the only text colour allowed on --sun */

  --ink:#121A16;          /* headings on bone */
  --ink-2:#3D4A43;        /* body copy */
  /* CAPTIONS AND META. Darkened from #6E7A72, which measured 3.93:1 on bone
     and 3.53:1 on bone-2 — under the 4.5:1 floor for body-size text, on the
     kickers, breadcrumbs, price caveats and town labels, which is most of the
     small type on the site. This value clears 4.5:1 on all three light grounds
     it is used against and still reads as muted. Re-measure before changing
     it: "a bit lighter" is how it failed the first time. */
  --ink-3:#5E6861;        /* captions, meta */
  --rule:#CFC6B2;         /* hairlines on bone */

  --on-pine:#CBD8CF;      /* body copy on the pine field */
  --on-pine-2:#8FA79A;    /* meta on the pine field */
  --on-pine-rule:rgba(203,216,207,.20);

  --flag:#9E3B24;         /* errors and warnings only */

  /* The diagnostic key's chips, and nothing else. These are the real colours
     of the real problems, so they are allowed to be colours the interface
     itself is not — and keeping them out of UI chrome is what stops the page
     reading as five accent colours fighting each other. */
  --dia-algae:#5C8A4A;    /* live growth on a shaded wall */
  --dia-salt:#D7E4E8;     /* dried salt film */
  --dia-streak:#3E3A34;   /* roof streaking — lifted off pure black so the
                            chip is still visible against the pine ground */
  --dia-rust:#B46A33;     /* iron out of irrigation water */
  --dia-cedar:#B9AC96;    /* weathered cedar */

  /* ---------------------------------------------------------------------
     TYPE
     Archivo Black — display only. One weight, very heavy, set large and
       tight. It is the poster half of the design and it must never be used
       below about 1.1rem, where it turns into a smudge.
     Karla — everything else. A humanist grotesque with enough character to
       hold a page on its own at body size.
     --------------------------------------------------------------------- */
  /* The fallback matters more than usual here, because the whole design is
     carried by the weight of this face. "Arial Black" must be QUOTED — a
     multi-word family name without quotes is invalid CSS, the declaration is
     dropped, and the page silently falls all the way through to a regular
     sans. That is what a missing pair of quotes looks like: not a broken
     page, just a page that is no longer the design. */
  --display:"Archivo Black","Arial Black","Helvetica Neue Bold",Impact,sans-serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-xs:.78rem;
  --t-sm:.9rem;
  --t-base:1.0625rem;
  --t-md:1.15rem;
  --t-lg:1.45rem;
  --t-xl:2rem;
  --t-2xl:2.8rem;
  --t-3xl:clamp(2.6rem,7vw,5rem);     /* the hero line */
  --t-4xl:clamp(3.4rem,12vw,8rem);    /* the section index numerals */

  --lh-poster:.94;
  --lh-tight:1.1;
  --lh-snug:1.32;
  --lh-body:1.7;

  --track-poster:-.03em;
  --track-tight:-.015em;
  --track-label:.18em;

  /* ---------------------------------------------------------------------
     SPACE  (4px base)
     --------------------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:7rem;

  /* ---------------------------------------------------------------------
     STRUCTURE
     Corners are close to square on purpose. A poster does not have rounded
     corners, and the 10-16px radius elsewhere in this family of sites is one
     of the things that makes them recognisable as a family.
     --------------------------------------------------------------------- */
  --r:3px;
  --r-sm:2px;
  --r-lg:4px;

  --border:2px solid var(--ink);
  --hair:1px solid var(--rule);

  --sh:none;              /* no drop shadows anywhere. Flat is the point. */
  --sh-sm:none;

  --wrap:1220px;
  --wrap-narrow:760px;
  --measure:68ch;

  --focus:3px solid var(--moss-600);
}