/* Hudson Row Advisors -- design tokens.
 *
 * Two layers on purpose: a named raw ramp, then semantic aliases that point into it. A future
 * rebrand swaps the ramp and every rule downstream keeps working untouched.
 *
 * Import order:  fonts.css -> brand-tokens.css -> your stylesheet
 *
 * THE GOLD RULE. No gold passes WCAG AA as text on a light ground -- the best candidate
 * managed 3.82 against bone, and the brand gold manages 2.22. Gold is therefore an ORNAMENT
 * colour: hairlines, rules, dividers, crest detail, seals. It becomes legitimate text only on
 * --hr-hunter, where it reaches 5.68. There is deliberately no gold-on-light lockup.
 */
:root {
  /* ---- raw ramp ---------------------------------------------------------- */
  --hr-hunter:    #16331F;   /* deepest green -- dark bands, footer, ground */
  --hr-forest:    #1E4A2E;   /* primary -- text, CTAs, links */
  --hr-green:     #245B37;   /* lighter accent */
  --hr-moss:      #2F6B42;   /* secondary accent */
  --hr-sage:      #5A6B5C;   /* body copy */
  --hr-sage-2:    #7C8A7E;   /* rules and dividers ONLY -- 3.32 on bone, fails as text */
  --hr-mist:      #A9B5A9;   /* muted text on hunter (6.46) */
  --hr-gold:      #C9A227;   /* ornament; text only on hunter */
  --hr-gold-deep: #A67C00;   /* the darkest gold that still reads gold */
  --hr-bone:      #F7F5EF;   /* page ground */
  --hr-line:      #E3E1D6;   /* borders */
  --hr-white:     #FFFFFF;

  /* Status colours sit away from the brand greens so a confirmation is never mistaken for
     brand chrome, and an error never reads as a call to action. */
  --hr-success:   #2F7D5B;
  --hr-warn:      #B7791F;
  --hr-danger:    #9B2C2C;

  /* ---- semantic aliases -------------------------------------------------- */
  --hr-bg:           var(--hr-bone);
  --hr-surface:      var(--hr-white);
  --hr-text:         var(--hr-hunter);
  --hr-text-muted:   var(--hr-sage);
  --hr-text-subtle:  var(--hr-sage-2);
  --hr-border:       var(--hr-line);
  --hr-accent:       var(--hr-forest);
  --hr-accent-press: var(--hr-hunter);
  --hr-on-accent:    var(--hr-white);
  --hr-ornament:     var(--hr-gold);

  /* ---- type -------------------------------------------------------------- */
  --hr-font-display: 'Cinzel', 'Cinzel Fallback', 'Trajan Pro', Georgia, serif;
  --hr-font-text:    'Archivo', 'Archivo Fallback', system-ui, -apple-system, sans-serif;
  --hr-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Cinzel is an inscriptional capitals face -- it has no true lowercase. Always set it in
     caps with tracking; never use it for running text. */
  --hr-display-track: 0.06em;

  --hr-weight-regular: 400;
  --hr-weight-medium:  500;
  --hr-weight-semi:    600;
  --hr-weight-bold:    700;

  /* ---- scale, radius, motion --------------------------------------------- */
  --hr-h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --hr-h2:      clamp(1.6rem, 3.0vw, 2.3rem);
  --hr-h3:      clamp(1.15rem, 1.9vw, 1.4rem);
  --hr-body:    1.0625rem;
  --hr-small:   0.875rem;
  --hr-eyebrow: 0.72rem;

  --hr-radius-sm: 3px;
  --hr-radius:    5px;
  --hr-radius-lg: 10px;

  --hr-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- helpers ------------------------------------------------------------- */
.hr-display {
  font-family: var(--hr-font-display);
  font-weight: var(--hr-weight-semi);
  letter-spacing: var(--hr-display-track);
  text-transform: uppercase;
}

.hr-eyebrow {
  font-family: var(--hr-font-text);
  font-size: var(--hr-eyebrow);
  font-weight: var(--hr-weight-semi);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-text-subtle);
}

.hr-btn {
  display: inline-block;
  font-family: var(--hr-font-text);
  font-weight: var(--hr-weight-semi);
  font-size: 0.9rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--hr-radius-sm);
  background: var(--hr-accent);
  color: var(--hr-on-accent);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--hr-ease);
}
.hr-btn:hover { background: var(--hr-accent-press); }
.hr-btn:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: 2px; }

/* A gold hairline is the brand's ornament of choice. It is a rule, never a text colour. */
.hr-rule-gold { border: 0; height: 1px; background: var(--hr-gold); opacity: .85; }

.hr-bg-dark { background: var(--hr-hunter); color: var(--hr-bone); }
.hr-bg-dark .hr-eyebrow { color: var(--hr-gold); }   /* 5.68 on hunter -- passes */
.hr-bg-dark a           { color: var(--hr-gold); }