/* ============================================================
   Laara Digital — Brand Design Tokens
   Version 3.0 — August 2026
   Companion to LAARA_Digital_Brand_Guidelines_v3.md

   ACCESSIBILITY WARNING — READ BEFORE CHANGING COLOURS
   Brand green (--laara-green) FAILS WCAG contrast against
   white and paper (2.62:1). It is safe ONLY as a background
   behind ink text, or as text on ink.
     - Green button  -> ink text     7.20:1  PASS AAA
     - Green text    -> on ink only  7.20:1  PASS AAA
     - Green text on white/paper     2.62:1  FAIL - use --laara-green-text
   The accessible pairings are encoded in the semantic tokens
   below. Prefer those over the raw palette values.
   ============================================================ */

/* ---------- Self-hosted Lato ----------
   Self-hosted instead of loaded from fonts.googleapis.com, removing a
   render-blocking cross-origin request. Only 400/700/900 are included —
   Lato has no true 600 (semibold) weight; Google Fonts silently dropped
   it from the old @400;600;700;900 request too, so this matches what
   actually rendered before. Every font-weight:600 declaration in this
   codebase is being browser-synthesized (faux-bold) from the 400 file,
   not a real semibold cut — same as it always was. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/lato-900.woff2') format('woff2');
}

/* ---------- Metric-matched fallbacks (CLS) ----------
   font-display:swap means the system font paints first and is then
   replaced by Lato. If the two have different metrics the whole page
   reflows on swap — a Core Web Vitals CLS hit, and a visible jolt on
   the slow connections this audience is on.

   These faces download nothing: each is an alias for a font already on
   the device (src: local(...)), re-scaled so its line box matches Lato's.
   A face whose local() font is absent is skipped silently, so the chain
   below costs nothing on platforms it doesn't apply to.

   The three exist because one blended number would be wrong everywhere:
   measured against Lato, Segoe UI needs size-adjust 102.51%, Roboto
   100.94% and Arial 99.03% — a ~3.5% spread. Values were measured from
   the real woff2 files rendered in Chrome (Canvas TextMetrics over this
   site's own copy), not taken from a generator. Lato's own metrics are
   ascent 0.9870, descent 0.2130, line gap 0 (upm 2000). Re-measure if
   the font files are ever re-subset.

   Order below mirrors the real stack in --laara-font:
   system-ui (Segoe UI on Windows) -> Roboto (Android) -> Arial (rest). */
@font-face {
  font-family: 'Lato Fallback Segoe';
  src: local('Segoe UI');
  size-adjust: 102.51%;
  ascent-override: 96.28%;
  descent-override: 20.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lato Fallback Roboto';
  src: local('Roboto');
  size-adjust: 100.94%;
  ascent-override: 97.78%;
  descent-override: 21.10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lato Fallback Arial';
  src: local('Arial');
  size-adjust: 99.03%;
  ascent-override: 99.66%;
  descent-override: 21.51%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Brand palette ---------- */
  --laara-ink:              #101114;   /* primary: wordmark, headlines, body */
  --laara-green:            #12B76A;   /* accent: dot, buttons, highlights */
  --laara-paper:            #FAFAF9;   /* primary light background */
  --laara-white:            #FFFFFF;

  /* Same three colours as raw channels, for translucency.
     A var() cannot be interpolated into the legacy comma form, so anything
     needing an alpha used to hardcode the channels — which is how ~35
     literal translucent copies of the three brand colours ended up
     scattered through style.css, none of them tracking the token above.
     Phase 7 replaced all of them with the tokens below.

     Use: rgb(var(--laara-green-rgb) / 0.12)

     Space-separated, NOT comma-separated, and that is load-bearing:
     the slash-alpha form is CSS Color 4 syntax, which does not allow
     commas. `rgb(16, 17, 20 / 0.5)` is invalid and the whole
     declaration is dropped silently — no console error, the element
     just keeps its inherited colour.

     These MUST stay in sync with the three hex values above — change
     one, change its pair. They are the same colour, written twice
     because CSS gives no way to write it once. */
  --laara-ink-rgb:          16 17 20;
  --laara-green-rgb:        18 183 106;
  --laara-paper-rgb:        250 250 249;

  /* Green states + accessible text variants.
     NOTE: green darkens TOWARD ink, so darker button states REDUCE
     contrast with ink text. #0E8E52 is the floor — any darker and
     ink text drops below 4.5:1. Do not darken these further. */
  --laara-green-hover:      #0FA05D;   /* button hover  — ink 5.58:1 AA */
  --laara-green-active:     #0E9455;   /* button pressed — ink 4.84:1 AA */
  --laara-green-text:       #0D7F4A;   /* green TEXT on light bg — 4.53:1 on
                                          --laara-surface, AA (was #0D844D,
                                          4.27:1 on surface — failed. Sign-off
                                          2026-09-05, see docs/BUILD-PROMPT.md
                                          Decision 5)                         */
  --laara-green-deep:       #0A633A;   /* green TEXT, AAA — 7.35:1            */

  /* ---------- Functional neutrals ---------- */
  --laara-text-grey:        #6A6F78;   /* secondary text — 4.53:1 on
                                          --laara-surface, AA (was #6E747D,
                                          4.24:1 on surface — failed. Sign-off
                                          2026-09-05, see docs/BUILD-PROMPT.md
                                          Decision 5)                         */
  --laara-muted-grey:       #8A8F98;   /* 2.92:1 on surface — LARGE TEXT /
                                          non-text only, never body/label text */
  --laara-border:           #E4E4E1;
  --laara-surface:          #F3F3F1;
  --laara-ink-raised:       #1b1c20;   /* one step above ink: the fake browser
                                          chrome bar on case-study frames      */

  /* ---------- Status ---------- */
  --laara-error:            #B3261E;   /* form + field errors — 6.54:1 on white,
                                          AA. Pair with an icon or text label,
                                          never colour alone.                  */
  --laara-on-dark-muted:    rgb(var(--laara-paper-rgb) / 0.70);
  --laara-on-dark-subtle:   rgb(var(--laara-paper-rgb) / 0.55);

  /* ---------- Semantic tokens (prefer these) ---------- */
  --laara-bg:               var(--laara-paper);
  --laara-bg-alt:           var(--laara-white);
  --laara-bg-inverse:       var(--laara-ink);

  --laara-text:             var(--laara-ink);        /* 18.08:1 on paper */
  --laara-text-secondary:   var(--laara-text-grey);  /*  4.53:1 on surface */
  --laara-text-inverse:     var(--laara-paper);      /* 18.08:1 on ink   */
  --laara-link:             var(--laara-green-text); /*  4.53:1 on surface */
  --laara-link-on-dark:     var(--laara-green);      /*  7.20:1 on ink   */

  --laara-accent:           var(--laara-green);
  --laara-on-accent:        var(--laara-ink);        /* 7.20:1 — NEVER white */

  /* ---------- Hero glow accents ----------
     One hue per page-hero, used ONLY as a low-alpha radial gradient behind
     the fluid canvas (0.10-0.16), so they never carry text and never need a
     contrast rating. They were previously five loose "R, G, B" triples in
     style.css that the token system did not define at all; named here so the
     palette is inventoried in one place.

     Space-separated to match --laara-*-rgb, because they are consumed the
     same way: rgb(var(--hero-glow) / 0.16). */
  --laara-hero-blue:        91 124 224;
  --laara-hero-amber:       214 158 46;
  --laara-hero-teal:        39 168 158;
  --laara-hero-coral:       214 100 74;
  --laara-hero-pink:        216 88 143;   /* homepage default */

  --heading-reveal-color:   var(--laara-green);      /* section-heading sweep block */

  --laara-focus-ring:       var(--laara-ink);
  --laara-focus-ring-dark:  var(--laara-green);

  /* ---------- Typography ---------- */
  /* The three 'Lato Fallback *' entries sit between Lato and the real system
     stack: they are metric-matched aliases of fonts already on the device (see
     the @font-face block above), so the pre-swap paint has Lato's line box and
     the page doesn't reflow when Lato arrives. Each is skipped where its local
     font is absent, falling through to the untouched system stack at the end. */
  --laara-font:             'Lato', 'Lato Fallback Segoe', 'Lato Fallback Roboto', 'Lato Fallback Arial', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Archivo Black is LOGO ARTWORK ONLY — do not load or use as web type */

  --laara-fw-regular:       400;
  --laara-fw-semibold:      700;   /* Lato has no real 600 cut — was rendering as browser-synthesized faux-bold from 400; mapped to the real bold file instead */
  --laara-fw-bold:          700;
  --laara-fw-black:         900;

  /* Fluid type scale (min at 360px, max at 1280px) */
  --laara-fs-display:       clamp(2.5rem,  1.40rem + 4.9vw, 5rem);      /* 40 -> 80 */
  --laara-fs-h1:            clamp(2.125rem, 1.45rem + 3.0vw, 3.5rem);   /* 34 -> 56 */
  --laara-fs-h2:            clamp(1.75rem, 1.40rem + 1.5vw, 2.625rem);  /* 28 -> 42 */
  --laara-fs-h3:            clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);  /* 22 -> 28 */
  --laara-fs-body-lg:       clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem); /* 17 -> 20 */
  --laara-fs-body:          1rem;                                        /* 16 min  */
  --laara-fs-small:         0.875rem;                                    /* 14      */
  /* 11px. ORNAMENT ONLY — count chips and circular numerals, where the
     text is a one- or two-character label sitting next to a full-size
     one. Never body copy, never a standalone label: 16px is the floor
     for anything a visitor has to actually read. Kept as a token so
     these two uses are inventoried rather than invisible. */
  --laara-fs-badge:         0.6875rem;                                   /* 11      */

  --laara-lh-display:       1.02;
  --laara-lh-heading:       1.15;
  --laara-lh-body:          1.6;
  --laara-lh-tight:         1.25;

  --laara-measure:          68ch;   /* max paragraph width */

  /* ---------- Spacing scale ---------- */
  --laara-space-1:          0.25rem;   /*   4px */
  --laara-space-2:          0.5rem;    /*   8px */
  --laara-space-3:          0.75rem;   /*  12px */
  --laara-space-4:          1rem;      /*  16px */
  --laara-space-5:          1.25rem;   /*  20px */
  --laara-space-6:          1.5rem;    /*  24px */
  --laara-space-8:          2rem;      /*  32px */
  --laara-space-10:         2.5rem;    /*  40px */
  --laara-space-12:         3rem;      /*  48px */
  --laara-space-16:         4rem;      /*  64px */
  --laara-space-24:         6rem;      /*  96px */
  --laara-space-32:         8rem;      /* 128px */

  --laara-section-y:        clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);
  --laara-page-x:           clamp(1.5rem, 0.9rem + 2.6vw, 5rem);

  /* ---------- Layout ---------- */
  --laara-content-max:      1280px;
  --laara-header-h:         64px;
  --laara-header-h-desktop: 72px;

  /* ---------- Radius ---------- */
  --laara-radius-sm:        4px;
  --laara-radius:           8px;    /* buttons, inputs */
  --laara-radius-card:      10px;
  --laara-radius-lg:        16px;   /* feature cards */

  /* ---------- Elevation ---------- */
  --laara-shadow-sm:        0 1px 2px rgb(var(--laara-ink-rgb) / 0.06);
  --laara-shadow:           0 4px 16px rgb(var(--laara-ink-rgb) / 0.08);
  --laara-shadow-lg:        0 12px 32px rgb(var(--laara-ink-rgb) / 0.12);

  /* ---------- Motion ---------- */
  --laara-dur-micro:        180ms;
  --laara-dur-reveal:       280ms;
  --laara-dur-section:      500ms;
  --laara-dur-heading:      900ms;   /* section-heading colour-sweep reveal */

  /* The service-card icon animations run slower than a micro-interaction
     but faster than a section reveal, so they had been writing their own
     millisecond values inline — ~29 of them across style.css, none of
     which tracked anything. These four are those values, named. They are
     deliberately the exact numbers already in use, so adopting a token
     changes nothing on screen; picking "tidier" round numbers instead
     would have quietly retimed every icon. */
  --laara-dur-icon:         400ms;   /* icon transform / fade — the common case */
  --laara-dur-icon-mid:     450ms;   /* paired transform + opacity moves        */
  --laara-dur-icon-slow:    550ms;   /* longer travel: ring, phone, bars        */
  --laara-dur-draw:         700ms;   /* SVG stroke-dashoffset line draws        */
  --laara-delay-stagger:    90ms;    /* one step of a staggered sequence        */

  --laara-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --laara-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Controls ---------- */
  --laara-control-h:        48px;   /* min button / input height */
  --laara-touch-min:        44px;   /* WCAG 2.2 target size */
}

/* ============================================================
   BASE
   ============================================================ */

body {
  font-family: var(--laara-font);
  font-weight: var(--laara-fw-regular);
  font-size: var(--laara-fs-body);
  line-height: var(--laara-lh-body);
  color: var(--laara-text);
  background: var(--laara-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--laara-lh-heading); text-wrap: balance; }
h1 { font-size: var(--laara-fs-h1); font-weight: var(--laara-fw-black); }
h2 { font-size: var(--laara-fs-h2); font-weight: var(--laara-fw-bold); }
h3 { font-size: var(--laara-fs-h3); font-weight: var(--laara-fw-bold); }

.laara-display {
  font-size: var(--laara-fs-display);
  font-weight: var(--laara-fw-black);
  line-height: var(--laara-lh-display);
}

p { max-width: var(--laara-measure); }

a { color: var(--laara-link); text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }

/* Visible focus everywhere — WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--laara-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.laara-container {
  width: 100%;
  max-width: var(--laara-content-max);
  margin-inline: auto;
  padding-inline: var(--laara-page-x);
}

.laara-section { padding-block: var(--laara-section-y); }

.laara-header {
  min-height: var(--laara-header-h);
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .laara-header { min-height: var(--laara-header-h-desktop); }
}

/* ============================================================
   LOGO
   Header uses the COMPACT mark (laara. only) — Tier 2.
   The primary lockup with DIGITAL needs 200px+ to stay legible.
   ============================================================ */

.laara-logo {
  width: clamp(110px, 12vw, 150px);
  height: auto;
  max-height: 40px;
  object-fit: contain;
  display: block;
}

/* Only use this where the rendered width is genuinely 200px+ */
.laara-logo--primary {
  width: clamp(200px, 22vw, 320px);
  max-height: none;
}

/* ============================================================
   BUTTONS
   Green background ALWAYS takes ink text. White on green is
   2.62:1 and fails WCAG AA. This is the most common mistake.
   ============================================================ */

.laara-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--laara-control-h);
  padding: 0 var(--laara-space-6);
  border-radius: var(--laara-radius);
  font-family: var(--laara-font);
  font-size: 1.0625rem;
  font-weight: var(--laara-fw-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--laara-dur-micro) var(--laara-ease-in-out),
              color var(--laara-dur-micro) var(--laara-ease-in-out);
}
.laara-btn:hover { text-decoration: none; }

.laara-btn--primary {
  background: var(--laara-accent);
  color: var(--laara-on-accent);   /* ink — 7.20:1 */
}
.laara-btn--primary:hover  { background: var(--laara-green-hover); }
.laara-btn--primary:active { background: var(--laara-green-active); }

.laara-btn--secondary {
  background: transparent;
  color: var(--laara-ink);
  border-color: var(--laara-ink);
}
.laara-btn--secondary:hover { background: var(--laara-ink); color: var(--laara-paper); }

/* Full-width button — form submits, stacked mobile CTAs. Replaces the
   inline style="width:100%" that was on the contact form's submit. */
.laara-btn--block { width: 100%; }

/* On an ink background, the primary button is unchanged —
   green + ink text works on both light and dark surfaces. */
.laara-inverse .laara-btn--secondary {
  color: var(--laara-paper);
  border-color: var(--laara-paper);
}
.laara-inverse .laara-btn--secondary:hover {
  background: var(--laara-paper);
  color: var(--laara-ink);
}
.laara-inverse :focus-visible { outline-color: var(--laara-focus-ring-dark); }

/* ============================================================
   SURFACES
   ============================================================ */

.laara-inverse {
  background: var(--laara-bg-inverse);
  color: var(--laara-text-inverse);
}
.laara-inverse a { color: var(--laara-link-on-dark); }   /* 7.20:1 on ink */
.laara-inverse .laara-text-secondary { color: var(--laara-on-dark-muted); }
/* .reveal-support is a section's supporting line and defaults to
   --laara-text-grey, which is validated against LIGHT backgrounds only —
   on ink it lands at 4.01:1, under AA. Inside a dark section it needs the
   on-dark pairing like any other secondary text. */
.laara-inverse .reveal-support { color: var(--laara-on-dark-muted); }
.laara-inverse .laara-label { color: var(--laara-on-dark-muted); }
/* .laara-btn--primary is an <a> — without this override, the rule
   above wins on specificity and replaces its ink text with green,
   making the label invisible (green on green) inside dark sections. */
.laara-inverse .laara-btn--primary { color: var(--laara-on-accent); }

.laara-card {
  background: var(--laara-white);
  border: 1.5px solid var(--laara-border);
  border-radius: var(--laara-radius-card);
  padding: var(--laara-space-8);
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: background var(--laara-dur-micro) var(--laara-ease-in-out),
              transform var(--laara-dur-micro) var(--laara-ease-out),
              box-shadow var(--laara-dur-micro) var(--laara-ease-out);
}

.laara-text-secondary { color: var(--laara-text-secondary); }

/* Was --laara-muted-grey (2.92:1 on surface) — fails AA at this size
   (--laara-fs-small = 14px, not large text). Switched to --laara-text-grey.
   Sign-off 2026-09-05, see docs/BUILD-PROMPT.md Decision 5. */
.laara-label {
  color: var(--laara-text-grey);
  font-size: var(--laara-fs-small);
  font-weight: var(--laara-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   FORMS
   ============================================================ */

.laara-input {
  min-height: var(--laara-control-h);
  width: 100%;
  padding: var(--laara-space-3) var(--laara-space-4);
  font-family: var(--laara-font);
  font-size: var(--laara-fs-body);   /* 16px — prevents iOS zoom on focus */
  color: var(--laara-text);
  background: var(--laara-white);
  border: 1.5px solid var(--laara-border);
  border-radius: var(--laara-radius);
}
.laara-input:focus-visible { border-color: var(--laara-ink); }

.laara-field-label {
  display: block;
  margin-bottom: var(--laara-space-2);
  font-weight: var(--laara-fw-semibold);
  color: var(--laara-text);
}

/* ============================================================
   BRAND MOTIF — the dot
   The green full stop, reused as a bullet / marker.
   Decorative: hidden from assistive tech.
   ============================================================ */

.laara-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.11em;   /* matches the logo dot's 22% radius */
  background: var(--laara-accent);
  vertical-align: baseline;
}

.laara-list { list-style: none; padding-left: 0; }
.laara-list li {
  position: relative;
  padding-left: var(--laara-space-6);
  margin-bottom: var(--laara-space-3);
}
.laara-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--laara-accent);
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}