/* Cemtone — brand tokens
   Every colour here was SAMPLED from a real client file. Method and percentages are in
   docs/cemtone/BRAND-GUIDE.md. Nothing is invented; where a value is derived rather than
   sampled it says so, and where something is unverified it says that too. */

:root{
  /* ---- The red. Sampled from CEMTONE LOGO.png: #C82127 is 70.6% of the file, exactly.
         The brochure's red reads #C42024, which is the same ink after compression — the
         logo is the authority.
         CORRECTED 2026-10-01: this was #C61E24 until the logo was counted properly. That
         value was in neither file; it had been carried forward from a rounded sample and
         then described in the brand guide as measured, which it was not.
         ⚠ #C82127 on --paper is 4.07:1 — BELOW the 4.5 needed for normal text. The red is
         for the mark, for rules, and for display type at 24px and up. Small red text uses
         --red-deep (5.65:1). ---- */
  --red:          #C82127;
  --red-deep:     #A01A1F;   /* derived: the red at 80% lightness. Hover, pressed, and any
                                red text below 24px, where --red itself fails contrast */
  --red-wash:     #E2CDC8;   /* derived: the red at 6% over paper, for tinted panels */

  /* ---- The paper. 83.1% of brochure page 3 and 73.9% of page 13 — the single most
         common colour in the whole document after the photography. A warm greige, not
         a white. This is the brand's ground. ---- */
  --paper:        #E4D8D2;
  --paper-light:  #EFE7E3;   /* derived: paper lifted, for cards sitting on paper */
  --paper-edge:   #D3C5BE;   /* derived: paper darkened, for hairlines and dividers */

  /* ---- The ink. Sampled from the dark neutrals across all 13 brochure pages
         (#141410 / #10100C). Warm near-black, never pure #000. ---- */
  --ink:          #141410;
  --ink-soft:     #3B3732;   /* derived: body copy that is not a heading */
  --ink-muted:    #625B53;   /* derived: captions, units, table secondary text.
                                CORRECTED 2026-10-01: was #6E675F, which is 3.99:1 on paper
                                and 4.57:1 on paper-light — it failed AA on the background it
                                is used on most. #625B53 is the lightest value in the same
                                warm hue that passes on both (4.79 / 5.48). */

  /* ---- The board. Sampled from the product photography on p4 and the installed
         walls on p7/p9/p11. This is what Cemtone actually looks like, and it is the
         reason the palette is warm rather than cool grey. ---- */
  --board-light:  #DCD8D4;
  --board:        #CCC8C4;
  --board-dark:   #8C887C;

  /* ---- White. #FCFCFC, not #FFFFFF — a hair off pure, to match the ink being a hair off
         pure black. (The lettering inside the supplied logo file is in fact #FFFFFF, but
         that file is a red plate, not a mark; see below.) ---- */
  --white:        #FCFCFC;

  /* ---- The logo, and what is actually usable in it.
         The first supplied file was a solid red PLATE (`CEMTONE LOGO.png`, 1149×216, no
         alpha) with the letters knocked out in white, so the mark could not be placed on
         paper without bringing its own red background. It was rescued by keying off the
         green channel.
         Superseded 3 Oct 2026: `Cemtome Logo.pdf` is genuine vector, and adds a house icon
         above the wordmark. img/cemtone-icon-*.png and cemtone-word-*.png are extracted
         from it — the house and the wordmark separately, because the supplied lockup is
         stacked at 2.37:1 and the header is a 77px strip.
         ⚠ The tagline in that PDF is live text in a font that is NOT EMBEDDED; it renders
         as a substituted serif. It is never rasterised from the file — the site sets it as
         live text. The font itself is still needed from the client's designer. ---- */

  /* ---- Type.
     ⚠ THE BRAND'S REAL TYPEFACES ARE UNIDENTIFIED. The brochure is a flattened
     Photoshop export with no text layer and no embedded font data, so nothing can be
     read out of it. The wordmark itself is custom-lettered — extended, squared
     terminals, a notched E — and must NEVER be re-set in a font.
     These are STAND-INS chosen to sit close to what the brochure shows: a geometric
     sans for display, a neutral grotesque for text. Treat them as a decision still to
     be made with the client, not as the brand's type. ---- */
  --display: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 1240px;

  /* ---- Motion.
     One duration scale and one easing, so every transition on the site feels like the
     same hand. `--ease-out` is the standard "arrives and settles" curve; nothing here
     bounces, because this is a building-materials manufacturer and not a toy. ---- */
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

/* Anyone who has asked their operating system to reduce motion gets none of it. This is
   not a nicety — vestibular disorders are real and scroll-driven movement is a trigger.
   Written once, here, so no individual animation has to remember. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}

img{max-width:100%}

/* Icons are drawn with stroke="currentColor", so colour comes from the text colour of
   whatever contains them — one rule covers every state instead of a recoloured copy. */
.icon{width:1.5em;height:1.5em;flex:0 0 auto;stroke:currentColor;fill:none;vertical-align:-.3em}