/* ==========================================================================
   HireJuno — tokens.css
   The design foundation: containers, spacing, type scale, surfaces,
   elevation, focus/interaction states, and a real dark mode.

   LOAD ORDER (required):
     brand.css  ->  redesign.css  ->  [page css]  ->  tokens.css  ->  motion.css

   tokens.css loads LAST so its dark-mode remap of the brand tokens wins.

   ADDITIVE CONTRACT
     - No existing token is renamed or deleted. Every `--juno-*`, `--ink*`,
       `--s-*`, `--r-*`, `--shadow-*` still resolves exactly as before in
       light mode. This file only ADDS `--hj-*` tokens and `.hj-*` classes.
     - In dark mode ONLY, the legacy brand tokens are re-VALUED (not renamed)
       so pages written against `var(--paper)` / `var(--ink)` stay coherent.

   ACCESSIBILITY
     Every colour pair defined here is measured. Body text >= 4.5:1,
     UI boundaries / focus rings >= 3:1, on every surface in the set.
     Three legacy tokens fail AA and are superseded — see SUPERSEDED below.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ======================================================================
     1. CONTAINERS  —  page max-widths + responsive gutters
     Gutter steps at the four target viewports: 375 / 768 / 1024 / 1440.
     ====================================================================== */
  --hj-gutter:           16px;   /* 375  -> 343px of content */
  --hj-container-xs:     480px;  /* auth cards, single form            */
  --hj-container-sm:     680px;  /* focused flows, checkout, article    */
  --hj-container-prose:  68ch;   /* long-form reading measure           */
  --hj-container-md:     900px;  /* two-column content                  */
  --hj-container:       1160px;  /* DEFAULT — matches legacy --container */
  --hj-container-lg:    1320px;  /* dense grids, dashboards             */
  --hj-container-xl:    1480px;  /* full marketing bleed                */

  /* ======================================================================
     2. SPACING  —  4px base, named by size not by number
     ====================================================================== */
  --hj-space-3xs:  2px;
  --hj-space-2xs:  4px;
  --hj-space-xs:   8px;
  --hj-space-sm:  12px;
  --hj-space-md:  16px;
  --hj-space-lg:  24px;
  --hj-space-xl:  32px;
  --hj-space-2xl: 48px;
  --hj-space-3xl: 64px;
  --hj-space-4xl: 96px;
  --hj-space-5xl: 128px;

  /* Fluid rhythm — these are the ones that make sections stop feeling
     arbitrary. Verified: 375 / 768 / 1440 px viewports. */
  --hj-section-sm: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);    /* 40 -> 64 */
  --hj-section:    clamp(3.5rem, 2.62rem  + 3.756vw, 6rem);    /* 56 -> 96 */
  --hj-section-lg: clamp(4.5rem, 3.268rem + 5.258vw, 8rem);    /* 72 ->128 */
  --hj-gap:        clamp(1rem,   0.8239rem + 0.7512vw, 1.5rem);/* 16 -> 24 */
  --hj-gap-lg:     clamp(1.5rem, 1.148rem  + 1.502vw,  2.5rem);/* 24 -> 40 */

  /* ======================================================================
     3. TYPOGRAPHY  —  fluid clamp scale, min locked at 375px
     ====================================================================== */
  --hj-text-2xs:  clamp(0.6875rem, 0.6655rem + 0.0939vw, 0.75rem);   /* 11-12 */
  --hj-text-xs:   clamp(0.75rem,   0.728rem  + 0.0939vw, 0.8125rem); /* 12-13 */
  --hj-text-sm:   clamp(0.875rem,  0.853rem  + 0.0939vw, 0.9375rem); /* 14-15 */
  --hj-text-base: clamp(1rem,      0.978rem  + 0.0939vw, 1.0625rem); /* 16-17 */
  --hj-text-md:   clamp(1.0625rem, 1.018rem  + 0.1878vw, 1.1875rem); /* 17-19 */
  --hj-text-lg:   clamp(1.125rem,  1.059rem  + 0.2817vw, 1.3125rem); /* 18-21 */
  --hj-text-xl:   clamp(1.25rem,   1.162rem  + 0.3756vw, 1.5rem);    /* 20-24 */
  --hj-text-2xl:  clamp(1.5rem,    1.368rem  + 0.5634vw, 1.875rem);  /* 24-30 */
  --hj-text-3xl:  clamp(1.75rem,   1.53rem   + 0.939vw,  2.375rem);  /* 28-38 */
  --hj-text-4xl:  clamp(2.125rem,  1.817rem  + 1.315vw,  3rem);      /* 34-48 */
  --hj-text-5xl:  clamp(2.5rem,    2.06rem   + 1.878vw,  3.75rem);   /* 40-60 */
  --hj-text-6xl:  clamp(2.875rem,  2.303rem  + 2.441vw,  4.5rem);    /* 46-72 */

  --hj-leading-display: 1.05;
  --hj-leading-tight:   1.18;
  --hj-leading-snug:    1.32;
  --hj-leading-normal:  1.55;   /* body floor  */
  --hj-leading-relaxed: 1.7;    /* long-form   */
  --hj-leading-loose:   1.75;   /* body ceiling */

  --hj-tracking-tighter: -0.03em;
  --hj-tracking-tight:   -0.02em;
  --hj-tracking-normal:   0em;
  --hj-tracking-wide:     0.04em;
  --hj-tracking-caps:     0.06em;

  --hj-measure:        68ch;  /* default prose line length */
  --hj-measure-narrow: 60ch;
  --hj-measure-wide:   75ch;

  --hj-font-display: var(--font-display, 'Outfit', system-ui, sans-serif);
  --hj-font-body:    var(--font-body, 'Work Sans', system-ui, sans-serif);

  /* ======================================================================
     4. SURFACES + SEMANTIC COLOUR   (LIGHT)
     Every value below is contrast-measured — see IMPLEMENTATION.md.
     ====================================================================== */
  --hj-bg:              #FAF8F3;  /* page          (= --cream) */
  --hj-surface:         #FFFFFF;  /* cards, panels (= --paper) */
  --hj-surface-raised:  #FFFFFF;  /* popovers, modals          */
  --hj-surface-sunken:  #F3EFE6;  /* wells, inset  (= --sand)  */
  --hj-surface-accent:  #E9F5EC;  /* green-tinted  (= --tint)  */
  --hj-surface-inverse: #0F1B2D;  /* dark band on a light page */

  --hj-fg:         #1B2A41;  /* 14.44:1 on surface */
  --hj-fg-muted:   #4A5568;  /*  7.53:1 on surface */
  --hj-fg-subtle:  #5F6B7F;  /*  5.39:1 on surface — AA on ALL light surfaces */
  --hj-fg-inverse: #F5F7FA;

  --hj-border:             #E7E4DC;  /* decorative hairline */
  --hj-border-strong:      #D8D4C9;  /* emphasised divider  */
  --hj-border-interactive: #7E8794;  /* inputs/controls — 3.17:1 min (AA-ui) */

  --hj-accent:        #2E8B44;  /* brand green — fills & icons, NOT small text */
  --hj-accent-strong: #1F6B33;  /* solid fill under white text (6.54:1) + link text */
  --hj-accent-deep:   #14532D;
  --hj-accent-soft:   #E9F5EC;
  --hj-on-accent:     #FFFFFF;

  --hj-success: #12734B;  /* 5.87:1 */
  --hj-danger:  #B93030;  /* 5.95:1 */
  --hj-warning: #8A6200;  /* 5.49:1 */
  --hj-info:    #1D5A9E;  /* 6.98:1 */
  --hj-success-soft: #E4F3EA;
  --hj-danger-soft:  #FBE8E8;
  --hj-warning-soft: #FDF3DC;
  --hj-info-soft:    #E3EEFB;

  /* ======================================================================
     5. ELEVATION  —  flat-leaning. Restraint over drop-shadow.
     Depth comes from border first, shadow second.
     ====================================================================== */
  --hj-shadow-color: 27 42 65;   /* navy, as R G B for rgb()/alpha */
  --hj-elev-0: none;
  --hj-elev-1: 0 1px 2px rgb(var(--hj-shadow-color) / .05);
  --hj-elev-2: 0 1px 2px rgb(var(--hj-shadow-color) / .05),
               0 4px 10px -4px rgb(var(--hj-shadow-color) / .07);
  --hj-elev-3: 0 2px 4px -1px rgb(var(--hj-shadow-color) / .06),
               0 12px 24px -8px rgb(var(--hj-shadow-color) / .11);
  --hj-elev-4: 0 4px 8px -2px rgb(var(--hj-shadow-color) / .08),
               0 24px 48px -12px rgb(var(--hj-shadow-color) / .18);
  --hj-elev-accent: 0 6px 18px -6px rgb(46 139 68 / .35);

  /* ======================================================================
     6. RADII / RINGS / LAYERS
     ====================================================================== */
  --hj-radius-xs:   6px;
  --hj-radius-sm:   8px;
  --hj-radius-md:  12px;
  --hj-radius-lg:  16px;
  --hj-radius-xl:  20px;
  --hj-radius-2xl: 28px;
  --hj-radius-pill: 999px;

  --hj-focus-color:  #1F6B33;             /* 5.70:1 min on light surfaces */
  --hj-focus-halo:   rgb(46 139 68 / .22);
  --hj-focus-width:  3px;
  --hj-focus-offset: 2px;

  --hj-tap-min: 44px;   /* WCAG 2.5.8 / Apple HIG minimum */

  --hj-z-base:    0;
  --hj-z-raised:  10;
  --hj-z-sticky:  100;
  --hj-z-header:  200;
  --hj-z-overlay: 800;
  --hj-z-modal:   900;
  --hj-z-toast:  1000;
}

/* Gutter steps — the four validated breakpoints */
@media (min-width: 768px)  { :root { --hj-gutter: 24px; } }
@media (min-width: 1024px) { :root { --hj-gutter: 32px; } }
@media (min-width: 1440px) { :root { --hj-gutter: 40px; } }


/* ==========================================================================
   7. DARK MODE
   Opt-in by attribute so no existing page silently flips and breaks on
   hard-coded whites:
     <html data-theme="dark">  -> always dark
     <html data-theme="light"> -> always light
     <html data-theme="auto">  -> follows the OS
   Legacy brand tokens are RE-VALUED here (never renamed) so pages built
   on var(--paper)/var(--ink)/var(--line) stay coherent in dark.
   ========================================================================== */


/* The actual apply-block. Shared by the explicit and the media-query path. */


/* data-theme="auto" — same apply-block, gated on the OS preference. */


/* Dark: neutralise the light-only decorative washes baked into brand.css /
   redesign.css so dark pages don't get a bright green haze. */


/* data-theme="auto" — same apply-block, gated on the OS preference.
   Without this, an auto-themed page on a dark OS took the dark token block
   above (dark body) but kept the light decorative washes: a cream navbar and
   bright green hero haze floating on a dark page. */


/* ==========================================================================
   8. LAYOUT UTILITIES
   ========================================================================== */
.hj-container {
  width: 100%;
  max-width: var(--hj-container);
  margin-inline: auto;
  padding-inline: var(--hj-gutter);
}
.hj-container--xs     { max-width: var(--hj-container-xs); }
.hj-container--sm     { max-width: var(--hj-container-sm); }
.hj-container--md     { max-width: var(--hj-container-md); }
.hj-container--lg     { max-width: var(--hj-container-lg); }
.hj-container--xl     { max-width: var(--hj-container-xl); }
.hj-container--prose  { max-width: calc(var(--hj-container-prose) + 2 * var(--hj-gutter)); }
.hj-container--flush  { padding-inline: 0; }

/* Escape the container to full-bleed (rails, hero imagery) without
   causing horizontal scroll — the negative margin exactly cancels the
   gutter, so the document width never exceeds 100%. */
.hj-bleed { margin-inline: calc(-1 * var(--hj-gutter)); }

/* Section rhythm — the thing that was arbitrary. */
.hj-section       { padding-block: var(--hj-section); }
.hj-section--sm   { padding-block: var(--hj-section-sm); }
.hj-section--lg   { padding-block: var(--hj-section-lg); }
.hj-section--flush-top    { padding-block-start: 0; }
.hj-section--flush-bottom { padding-block-end: 0; }
.hj-section--surface { background: var(--hj-surface); }
.hj-section--sunken  { background: var(--hj-surface-sunken); }
.hj-section--accent  { background: var(--hj-surface-accent); }
.hj-section--inverse { background: var(--hj-surface-inverse); color: var(--hj-fg-inverse); }
.hj-section--inverse :is(h1,h2,h3,h4) { color: var(--hj-fg-inverse); }
.hj-section--inverse p { color: rgb(255 255 255 / .78); }

/* Owl stack — consistent vertical rhythm without per-element margins. */
.hj-stack       { display: flex; flex-direction: column; }
.hj-stack > * + * { margin-block-start: var(--hj-stack-gap, var(--hj-space-md)); }
.hj-stack--xs  { --hj-stack-gap: var(--hj-space-xs); }
.hj-stack--sm  { --hj-stack-gap: var(--hj-space-sm); }
.hj-stack--lg  { --hj-stack-gap: var(--hj-space-lg); }
.hj-stack--xl  { --hj-stack-gap: var(--hj-space-xl); }
.hj-stack--2xl { --hj-stack-gap: var(--hj-space-2xl); }

/* Cluster — wrapping row of chips/buttons/meta. */
.hj-cluster {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--hj-cluster-gap, var(--hj-space-sm));
}
.hj-cluster--between { justify-content: space-between; }
.hj-cluster--center  { justify-content: center; }

/* Auto grid — never overflows because the track floor collapses to 100%. */
.hj-grid {
  display: grid;
  gap: var(--hj-grid-gap, var(--hj-gap));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--hj-grid-min, 260px), 100%), 1fr));
}
.hj-grid--tight { --hj-grid-min: 180px; }
.hj-grid--wide  { --hj-grid-min: 340px; }
.hj-grid > * { min-width: 0; }

.hj-section-head { max-width: 46rem; margin-block-end: var(--hj-gap-lg); }
.hj-section-head--center { margin-inline: auto; text-align: center; }


/* ==========================================================================
   9. TYPOGRAPHY UTILITIES
   ========================================================================== */
.hj-display {
  font-family: var(--hj-font-display); font-weight: 800;
  font-size: var(--hj-text-5xl); line-height: var(--hj-leading-display);
  letter-spacing: var(--hj-tracking-tighter); color: var(--hj-fg);
  text-wrap: balance;
}
.hj-h1, .hj-h2, .hj-h3, .hj-h4 {
  font-family: var(--hj-font-display); color: var(--hj-fg);
  letter-spacing: var(--hj-tracking-tight); text-wrap: balance;
}
.hj-h1 { font-size: var(--hj-text-4xl); line-height: var(--hj-leading-display); font-weight: 800; }
.hj-h2 { font-size: var(--hj-text-3xl); line-height: var(--hj-leading-tight);   font-weight: 700; }
.hj-h3 { font-size: var(--hj-text-xl);  line-height: var(--hj-leading-snug);    font-weight: 700; }
.hj-h4 { font-size: var(--hj-text-lg);  line-height: var(--hj-leading-snug);    font-weight: 600; letter-spacing: 0; }

.hj-lead  { font-size: var(--hj-text-md); line-height: var(--hj-leading-relaxed); color: var(--hj-fg-muted); max-width: var(--hj-measure); text-wrap: pretty; }
.hj-body  { font-size: var(--hj-text-base); line-height: var(--hj-leading-normal); color: var(--hj-fg-muted); }
.hj-small { font-size: var(--hj-text-sm); line-height: var(--hj-leading-normal); color: var(--hj-fg-subtle); }
.hj-micro { font-size: var(--hj-text-xs); line-height: var(--hj-leading-normal); color: var(--hj-fg-subtle); }
.hj-eyebrow {
  font-family: var(--hj-font-display); font-size: var(--hj-text-xs); font-weight: 700;
  letter-spacing: var(--hj-tracking-caps); text-transform: uppercase; color: var(--hj-accent-strong);
}
.hj-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Prose block — measure + rhythm for long-form copy. */
.hj-prose {
  max-width: var(--hj-measure);
  font-size: var(--hj-text-base);
  line-height: var(--hj-leading-relaxed);
  color: var(--hj-fg-muted);
  text-wrap: pretty;
}
.hj-prose--narrow { max-width: var(--hj-measure-narrow); }
.hj-prose--wide   { max-width: var(--hj-measure-wide); }
.hj-prose > * + *  { margin-block-start: var(--hj-space-md); }
.hj-prose :is(h2,h3,h4) { color: var(--hj-fg); font-family: var(--hj-font-display); line-height: var(--hj-leading-snug); }
.hj-prose > :is(h2,h3,h4) { margin-block-start: var(--hj-space-xl); }
.hj-prose h2 { font-size: var(--hj-text-2xl); }
.hj-prose h3 { font-size: var(--hj-text-lg); }
.hj-prose a  { color: var(--hj-accent-strong); text-underline-offset: 3px; }
.hj-prose :is(ul,ol) { padding-inline-start: 1.35em; }
.hj-prose li + li { margin-block-start: var(--hj-space-xs); }

.hj-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hj-clamp-2, .hj-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hj-clamp-2 { -webkit-line-clamp: 2; }
.hj-clamp-3 { -webkit-line-clamp: 3; }


/* ==========================================================================
   10. SURFACES + CARDS
   Flat-leaning: border does the work, shadow is a whisper.
   ========================================================================== */
.hj-surface {
  background: var(--hj-surface);
  border: 1px solid var(--hj-border);
  border-radius: var(--hj-radius-lg);
  color: var(--hj-fg);
}
.hj-surface--raised { background: var(--hj-surface-raised); box-shadow: var(--hj-elev-3); }
.hj-surface--sunken { background: var(--hj-surface-sunken); box-shadow: none; }
.hj-surface--accent { background: var(--hj-surface-accent); border-color: rgb(46 139 68 / .22); }
.hj-surface--flush  { border: 0; }

.hj-card {
  background: var(--hj-surface);
  border: 1px solid var(--hj-border);
  border-radius: var(--hj-radius-lg);
  padding: var(--hj-card-pad, var(--hj-space-lg));
  box-shadow: var(--hj-elev-1);
  color: var(--hj-fg);
  min-width: 0;
}
.hj-card--flat     { box-shadow: none; }
.hj-card--floating { box-shadow: var(--hj-elev-3); }
.hj-card--tight    { --hj-card-pad: var(--hj-space-md); }
.hj-card--roomy    { --hj-card-pad: var(--hj-space-xl); }
.hj-card--accent   { background: var(--hj-surface-accent); border-color: rgb(46 139 68 / .22); }

/* Interactive card: whole tile is a hit target. Hover is transform-only
   (see motion.css) so siblings never shift. */
.hj-card--interactive { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hj-card--interactive:hover { border-color: var(--hj-border-strong); box-shadow: var(--hj-elev-2); }

/* Stretched link: makes the whole card clickable from one real <a>,
   keeping a single accessible name and one tab stop. */
.hj-card--link { position: relative; }
.hj-card--link .hj-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hj-card--link :is(a, button):not(.hj-stretch) { position: relative; z-index: 2; }

.hj-divider { border: 0; border-top: 1px solid var(--hj-border); margin-block: var(--hj-space-lg); }
.hj-divider--strong { border-top-color: var(--hj-border-strong); }


/* ==========================================================================
   11. FOCUS + INTERACTION STATES
   ========================================================================== */

/* One visible focus ring for every focusable thing, on every surface.
   :where() keeps specificity at 0 so components can still restyle it. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]),
       [role="button"], [role="tab"], [role="link"], [role="checkbox"], [role="switch"],
       [contenteditable="true"]):focus-visible {
  outline: var(--hj-focus-width) solid var(--hj-focus-color);
  outline-offset: var(--hj-focus-offset);
  border-radius: var(--hj-focus-radius, var(--hj-radius-xs));
}
/* Focus inside a dark band needs the light ring instead. */
:where(.hj-section--inverse, .section--dark, .footer) :is(a, button, [tabindex]):focus-visible {
  outline-color: #5BE38E;
}
/* Never leave a keyboard user with an invisible target. */
:where(a, button):focus-visible { text-decoration-color: currentColor; }

/* Anything clickable gets the pointer + a real tap target. */
.hj-clickable, :where(button, [role="button"], summary, label[for], select) { cursor: pointer; }
:where(button, [role="button"]):disabled,
:where(button, [role="button"])[aria-disabled="true"] { cursor: not-allowed; }

/* 44x44 minimum without changing visual size: the ::after pad expands the
   hit area only. Use on icon-only buttons and dense links. */
.hj-tap { position: relative; }
.hj-tap::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: max(100%, var(--hj-tap-min)); height: max(100%, var(--hj-tap-min));
}
.hj-tap-box { min-width: var(--hj-tap-min); min-height: var(--hj-tap-min); }

/* Disabled + loading — one consistent read across every component. */
:where([disabled], [aria-disabled="true"], .hj-is-disabled) {
  opacity: .45;
  pointer-events: none;
  box-shadow: none !important;
}
.hj-is-loading, [aria-busy="true"] { cursor: progress; }
.hj-is-loading > *, [aria-busy="true"] > .hj-busy-hide { opacity: .55; }

/* Selection + scrollbar polish, both modes. */
::selection { background: var(--hj-accent-soft); color: var(--hj-fg); }

* { scrollbar-color: var(--hj-border-strong) transparent; }

/* Anything that scrolls sideways must say so, and never push the page. */
.hj-scroll-x {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hj-scroll-x > * { scroll-snap-align: start; }

/* Global overflow guard — the #1 cause of "broken on mobile". */
:where(html, body) { max-width: 100%; overflow-x: clip; }
:where(img, svg, video, canvas, iframe) { max-width: 100%; }


/* ==========================================================================
   12. SEMANTIC TEXT/STATUS HELPERS
   ========================================================================== */
.hj-fg        { color: var(--hj-fg); }
.hj-fg-muted  { color: var(--hj-fg-muted); }
.hj-fg-subtle { color: var(--hj-fg-subtle); }
.hj-fg-accent { color: var(--hj-accent-strong); }
.hj-fg-success{ color: var(--hj-success); }
.hj-fg-danger { color: var(--hj-danger); }
.hj-fg-warning{ color: var(--hj-warning); }
.hj-fg-info   { color: var(--hj-info); }

.hj-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--hj-radius-pill);
  font-family: var(--hj-font-display); font-size: var(--hj-text-xs); font-weight: 700;
  background: var(--hj-accent-soft); color: var(--hj-accent-strong);
  border: 1px solid transparent;
}
.hj-pill--success { background: var(--hj-success-soft); color: var(--hj-success); }
.hj-pill--danger  { background: var(--hj-danger-soft);  color: var(--hj-danger); }
.hj-pill--warning { background: var(--hj-warning-soft); color: var(--hj-warning); }
.hj-pill--info    { background: var(--hj-info-soft);    color: var(--hj-info); }
.hj-pill--outline { background: transparent; border-color: var(--hj-border-strong); color: var(--hj-fg-muted); }

/* Screen-reader-only, for icon buttons that must still be named. */
.hj-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ==========================================================================
   DARK MODE — header wordmark legibility.

   The navbar ships /assets/logo.png, whose "hire" wordmark is dark navy. On
   the dark navbar (rgb(14 22 33 / .92)) that half of the lockup drops to
   roughly 1.3:1 and effectively disappears — the brand reads as "Juno".
   /assets/logo-white.png is the same lockup in white and is already used in
   the footer, so this swaps to it rather than introducing new art.

   Done as a parent background + `visibility:hidden` on the <img> instead of
   swapping the src, because the header markup is emitted by
   scripts/lib/header.mjs and baked into the pre-rendered /suburbs tree —
   a CSS-only fix reaches every one of those pages without regenerating them.
   Accessibility is unaffected: the accessible name comes from the anchor's
   `aria-label="HireJuno home"`, not the <img> alt.
   ========================================================================== */


@media (max-width: 720px) {

  
}


/* ==========================================================================
   SUPERSEDED — legacy tokens that FAIL WCAG AA. Do not use for text.
     --ink-faint  #8A94A6   2.88:1 on cream  ->  use --hj-fg-subtle (5.08:1)
     --juno-green #2E8B44   4.29:1 on white  ->  use --hj-accent-strong (6.54:1)
                                                 for text and for solid fills
                                                 that carry white text.
     --success    #22A06B   3.33:1 on white  ->  use --hj-success (5.87:1)
     --danger     #D64545   4.38:1 on white  ->  use --hj-danger  (5.95:1)
   The old tokens still resolve — nothing breaks — but new work must use the
   --hj-* replacements. See design-system/hirejuno/IMPLEMENTATION.md.
   ========================================================================== */