/* ============================================================
   BRAND — PIERRE Smart Home
   "Smart buildings made simple. Premium, fairly priced."

   Client-supplied:

     #066481   the blue. Their accent, and their wordmark colour.

   Same light template as Studio Present — white ground, near-black type, the
   grey for secondary text — with the blue where the red sits there.

   The two brands stay apart on shape, not only on hue: PIERRE is the soft one
   (14px corners, pill buttons, Work Sans), Studio Present the sharp one (4px
   corners, square buttons, Source Sans 3).

   Loaded after styles.css. Tokens first, then the few places where PIERRE
   wants a different shape.
   ============================================================ */

:root {
  /* Their own near-black, which carries a petrol cast rather than being a
     neutral grey. Reads as black without being Studio Present's black. */
  --malt:      #0E222B;
  --stout:     #EDF1F3;   /* raised surface on a white ground, not a dark one */

  --amber:     #066481;   /* the blue. The beer path and every accent. */
  --amber-hi:  #0A8AAF;

  --foam:      #FFFFFF;

  /* The child path cannot be another blue. With the beer verdict now in the
     brand colour, a cyan beside it would read as the same verdict at three
     metres, and the whole design rests on the palette carrying the outcome.
     Gold is the strongest contrast available, and it reads as a medal next to
     the trophy in the child's stamp — which is the message anyway. 156 degrees
     of hue from the blue, and 5.3:1 on white so it holds up in daylight. */
  --water:     #946107;
  --water-hi:  #F0B845;

  /* White page, near-black type, and the entrance screen is the same white
     rather than a field of blue. */
  --ground:    var(--paper);
  --on-ground: var(--ink);
  --idle:      var(--paper);
  --on-idle:   var(--ink);

  /* Light type on the blue: #066481 is dark enough that near-black on it does
     not reach 2.5:1, while white clears 6:1. */
  --on-accent: var(--paper);

  --muted:      #747474;
  --muted-card: #747474;
  --muted-idle: #747474;

  /* Their wordmark is blue on their own site, so it stays blue here instead of
     taking the colour of the text around it. */
  --logo-colour: var(--accent);

  /* RUN solid in the brand blue, SMART. in the near-black. No outline. */
  --wordmark-run:        var(--accent);
  --wordmark-run-weight: 0;
  --wordmark-smart:      var(--ink);

  --display: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Work Sans is not width-variable, so font-stretch must be neutral or the
     browser synthesises a distortion. Their site tops out at 700; going
     heavier would look like a different company. */
  --display-weight: 700;
  --display-weight-light: 400;
  --display-stretch: 100%;
  --display-tracking: -0.015em;

  /* Their radius scale is 0.75–1.5rem. Soft, not sharp. */
  --radius: 14px;
  --btn-radius: 999px;
}

/* Fine ruled grid instead of the bottle-cap ridging — closer to a floor plan,
   which is what they sell. */
[data-brand="pierre"] .screen--idle::before {
  background:
    repeating-linear-gradient(90deg, var(--ink-a05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, var(--ink-a05) 0 1px, transparent 1px 48px);
}

/* Blue field, white type — the inverse of Studio Present's black-on-white
   button, because blue type on near-black would not be legible. */
[data-brand="pierre"] .btn--start {
  background: var(--accent);
  color: var(--paper);
}

/* Softer notches on the bib than the default 22px chamfer, and an edge, since
   a white card on a white page has nothing else to stand on. */
[data-brand="pierre"] .bib {
  clip-path: none;
  border-radius: var(--radius);
  border: 2px solid var(--rule);
}