/* ==========================================================================
   Clae Pest Control — tokens.css (owned by task 04; palette repointed by
   follow-up task 11, the "olive night" pass)

   The palette below is copied verbatim from /brand/tokens-demo.css
   (read-only — never edit that file). That file, not /brand/tokens.css, is
   what this app builds to now: /brand/tokens.css stays the scouted 1:1
   record of Clae's live site and is not the target any more. See
   handoffs/AMENDMENT-DESIGN-olive-night.md for the reasoning: no pure
   white, no pure black; grounds are bone (light) and night olive (dark);
   actions are olive, not lime; lime survives only as a signal, never a
   fill behind text. The two font stacks are swapped for Google-hosted
   substitutes: Unica 77 (Lineto) and FugueMono are Clae's licensed
   marketing fonts and are deliberately not shipped in this codebase.
   Hanken Grotesk and DM Mono stand in for them, loaded from Google Fonts
   in the layout head.

   Spacing, radius and hairline tokens are new here — the brand kit doesn't
   define a spacing scale, so this is task 04's addition for the portal.
   ========================================================================== */

:root {
  /* -- palette, verbatim from brand/tokens-demo.css ----------------------- */
  --clae-paper:      #f1efe6; /* bone: page ground */
  --clae-paper-2:    #f7f5ee; /* raised card on bone */
  --clae-sand:       #e4e0d1; /* wells, hairlines, chips */
  --clae-hairline:   #d6d2c2; /* hairline colour (see --clae-hairline-rule below
                                  for the portal's border shorthand) */
  --clae-ink:        #23261d; /* olive-black text — never a fill any more */
  --clae-night:      #1f231b; /* dark ground */
  --clae-night-2:    #2a2f24; /* raised surface on night */
  --clae-olive:      #5a6a1e; /* primary action fill, links */
  --clae-olive-2:    #4e5c1a; /* hover */
  --clae-lime:       #e6f90c; /* SIGNAL ONLY — never a fill behind text */
  --clae-periwinkle: #d4e0f5;
  --clae-bark:       #76644a;
  --clae-stone:      #636359; /* muted text */
  --clae-coral:      #c23a3a;
  --clae-teal:       #2b7460;
  --clae-blue:       #1863dc;

  /* semantic aliases — prefer these at call sites over the raw colour names */
  --clae-cta:            var(--clae-olive);
  --clae-cta-fg:         var(--clae-paper);
  --clae-cta-on-dark:    var(--clae-paper);
  --clae-cta-on-dark-fg: var(--clae-ink);
  --clae-signal:         var(--clae-lime);

  /* -- portal additions: the demo token file doesn't define these ---------- */
  /* Space-separated triplets, not comma-separated: rgb(var(...) / a) below
     needs the modern rgb(R G B / A) syntax to parse — mixing that slash
     with a legacy comma-separated triplet is invalid CSS and the browser
     drops the whole declaration (found while testing the login/office
     pages; landing/dist/assets/login-*.css already uses this same
     space-separated form for the same reason — see the Report). */
  --clae-paper-rgb:  241 239 230; /* for rgb(... / a) muted text/hairlines on night */
  --clae-night-rgb:   31  35  27;
  --clae-coral-rgb:  194  58  58; /* for rgb(... / a) alert tints, see base.css */
  --clae-coral-ink:    #8f2b2b;   /* coral text on a coral-tinted light band */
  --clae-periwinkle-2: #bccfee;  /* periwinkle hover */

  /* -- type: Google-hosted substitutes for Clae's licensed fonts ----------- */
  --clae-font-sans: "Hanken Grotesk", "Unica 77", "Helvetica Neue", Arial, sans-serif;
  --clae-font-mono: "DM Mono", "FugueMono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -- shape, unchanged by the palette swap --------------------------------- */
  --clae-radius-pill: 999px; /* every button and chip is a pill */
  --clae-radius-card: 18px;
  --clae-radius-sm:   10px;

  /* -- spacing scale (portal addition) --------------------------------------- */
  --clae-gap-3xs: 4px;
  --clae-gap-xs:  8px;
  --clae-gap-sm:  12px;
  --clae-gap-md:  20px;
  --clae-gap-lg:  28px;
  --clae-gap-xl:  40px;

  /* -- surfaces (portal addition) --------------------------------------------- */
  /* Renamed from --clae-hairline (task 11): brand/tokens-demo.css uses that
     name for the hairline *colour* (#d6d2c2, above), so this app's own
     "1px solid sand" border shorthand needed a name of its own to keep both
     meaning the same thing by --clae-hairline. */
  --clae-hairline-rule: 1px solid var(--clae-sand);
  --clae-shadow-card: none; /* cards carry a 1px sand border, never a drop shadow */

  /* -- layout (portal addition) -------------------------------------------------- */
  --clae-max-width: 1080px;

  /* -- motion (portal addition) ---------------------------------------------------- */
  --clae-ease: 150ms ease;
}