/* ------------------------------------------------------------------
   horizon.wyth.ai — design tokens
   Harmonized with Horizon Performance's corporate brand
   (horizonperformance.com), not GideonSoft or LDRX.

   Type:    Roboto Condensed 900 display + Roboto 400/500/700 body
   Color:   Deep navy ground, orange accent, mid-blue secondary
   Buttons: Ghost-outline primary (the corporate-site move)
   Surface: Dark hero / light body / dark "locked" tiles

   Pulled from live computed styles, June 2026. Not a clone of
   Horizon's logotype or trademarked assets.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@700;900&display=swap');

:root {
  /* ----- Color: brand ----- */
  --hp-navy:           #08334F;   /* primary surface, deep ground */
  --hp-navy-deep:      #112337;   /* gradient terminus, deeper ink */
  --hp-navy-darker:    #00264d;   /* LDRX-aligned, optional inert tiles */
  --hp-accent:         #f15722;   /* signature orange, used SPARINGLY for word-level emphasis */
  --hp-accent-deep:    #c02b0a;   /* section-headline orange on light bg */
  --hp-accent-amber:   #b35710;   /* button orange — darkened from sampled #d36915 to clear WCAG AA against white text */
  --hp-blue:           #1f6ba2;   /* link / secondary — darkened from sampled #257ab8 to clear WCAG AA against tinted page bg */
  --hp-steel:          #475a72;   /* slate band, supporting surface */

  /* ----- Color: neutral ----- */
  --hp-ink:            #212529;   /* body text on white */
  --hp-ink-muted:      #5a6573;   /* secondary text on white */
  --hp-ink-faint:      #8a939e;   /* caption / metadata */
  --hp-rule:           #dddedf;   /* dividers, faint borders */
  --hp-rule-soft:      #e3e7ec;   /* even softer divider */
  --hp-surface:        #ffffff;   /* primary card / page */
  --hp-surface-tint:   #fafafa;   /* page background */
  --hp-surface-cool:   #f4f6f8;   /* subtle alt surface */

  /* On-navy neutrals */
  --hp-on-navy:            #ffffff;
  --hp-on-navy-muted:      rgba(255,255,255,.72);
  --hp-on-navy-faint:      rgba(255,255,255,.45);
  --hp-on-navy-rule:       rgba(255,255,255,.22);

  /* ----- Type ----- */
  --hp-font-display:   'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --hp-font-body:      Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --hp-font-mono:      ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

  /* Scale (modular, ~1.2 perfect fourth-ish) */
  --hp-text-xs:        12px;
  --hp-text-sm:        14px;
  --hp-text-base:      16px;
  --hp-text-lg:        18px;
  --hp-text-xl:        22px;
  --hp-text-2xl:       28px;
  --hp-text-3xl:       36px;
  --hp-text-4xl:       48px;
  --hp-text-display:   72px;     /* hero only */

  --hp-leading-tight:  1.05;
  --hp-leading-snug:   1.25;
  --hp-leading-normal: 1.5;
  --hp-leading-loose:  1.7;

  --hp-tracking-tight:    -0.005em;
  --hp-tracking-normal:   0;
  --hp-tracking-wide:     0.04em;
  --hp-tracking-wider:    0.08em;
  --hp-tracking-widest:   0.16em;

  /* ----- Space (4px grid) ----- */
  --hp-space-1:  4px;
  --hp-space-2:  8px;
  --hp-space-3:  12px;
  --hp-space-4:  16px;
  --hp-space-5:  24px;
  --hp-space-6:  32px;
  --hp-space-7:  48px;
  --hp-space-8:  64px;
  --hp-space-9:  96px;

  /* ----- Radius ----- */
  --hp-radius-none:    0;       /* corporate-aligned buttons are sharp */
  --hp-radius-sm:      2px;
  --hp-radius-md:      4px;
  --hp-radius-lg:      8px;     /* cards */
  --hp-radius-pill:    999px;

  /* ----- Shadow ----- */
  --hp-shadow-sm:  0 1px 2px rgba(15, 23, 34, .05);
  --hp-shadow-md:  0 4px 12px rgba(15, 23, 34, .08);
  --hp-shadow-lg:  0 16px 40px rgba(15, 23, 34, .14);

  /* ----- Motion ----- */
  --hp-ease:        cubic-bezier(.2, .8, .2, 1);
  --hp-duration:    160ms;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
body {
  margin: 0;
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-base);
  line-height: var(--hp-leading-normal);
  color: var(--hp-ink);
  background: var(--hp-surface-tint);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------
   Typography utilities
   Display = Roboto Condensed 900, intended for hero + section headlines
   ------------------------------------------------------------------ */
.hp-display,
.hp-h1 {
  font-family: var(--hp-font-display);
  font-weight: 900;
  font-size: var(--hp-text-display);
  line-height: var(--hp-leading-tight);
  letter-spacing: var(--hp-tracking-tight);
  color: var(--hp-on-navy);
  margin: 0;
}
.hp-h2 {
  font-family: var(--hp-font-display);
  font-weight: 900;
  font-size: var(--hp-text-3xl);
  line-height: var(--hp-leading-snug);
  letter-spacing: var(--hp-tracking-tight);
  color: var(--hp-navy);
  margin: 0 0 var(--hp-space-4);
}
.hp-h3 {
  font-family: var(--hp-font-display);
  font-weight: 700;
  font-size: var(--hp-text-2xl);
  line-height: var(--hp-leading-snug);
  letter-spacing: 0;
  color: var(--hp-navy);
  margin: 0 0 var(--hp-space-3);
}
.hp-eyebrow {
  font-family: var(--hp-font-body);
  font-weight: 700;
  font-size: var(--hp-text-sm);
  letter-spacing: var(--hp-tracking-widest);
  text-transform: uppercase;
  color: var(--hp-accent-deep);
  margin: 0 0 var(--hp-space-3);
}
.hp-section-headline {                 /* corporate-site move: deep-red headline + thin orange underline */
  font-family: var(--hp-font-display);
  font-weight: 900;
  font-size: var(--hp-text-xl);
  color: var(--hp-accent-deep);
  text-transform: uppercase;
  letter-spacing: var(--hp-tracking-wider);
  display: inline-block;
  padding-bottom: var(--hp-space-3);
  border-bottom: 2px solid var(--hp-accent);
  margin: 0 0 var(--hp-space-4);
}
.hp-body { font-size: var(--hp-text-base); line-height: var(--hp-leading-normal); color: var(--hp-ink); }
.hp-body-sm { font-size: var(--hp-text-sm); line-height: var(--hp-leading-normal); color: var(--hp-ink-muted); }
.hp-caption { font-size: var(--hp-text-xs); letter-spacing: var(--hp-tracking-wide); text-transform: uppercase; color: var(--hp-ink-muted); }
.hp-mark { color: var(--hp-accent); font-weight: 700; }   /* inline word-level highlight, corporate-site move */

/* ------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------ */
.hp-hero {
  background: linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-deep) 100%);
  color: var(--hp-on-navy);
  padding: var(--hp-space-9) var(--hp-space-7);
  position: relative;
  overflow: hidden;
}
.hp-hero .hp-display { color: var(--hp-on-navy); }
.hp-hero p { color: var(--hp-on-navy-muted); max-width: 56ch; }

.hp-section {
  background: var(--hp-surface);
  padding: var(--hp-space-8) var(--hp-space-7);
}
.hp-section--cool { background: var(--hp-surface-cool); }
.hp-section--steel {
  background: var(--hp-steel);
  color: var(--hp-on-navy);
}

.hp-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-rule-soft);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-5) var(--hp-space-5);
  box-shadow: var(--hp-shadow-sm);
}

/* Phase tile — the "locked / coming soon" muted-state surface */
.hp-tile-locked {
  background: var(--hp-navy);
  color: var(--hp-on-navy-muted);
  border: 1px solid var(--hp-on-navy-rule);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-5);
  opacity: .85;
  position: relative;
}
.hp-tile-locked::after {
  content: 'LOCKED';
  position: absolute;
  top: var(--hp-space-3);
  right: var(--hp-space-3);
  font-size: 10px;
  letter-spacing: var(--hp-tracking-widest);
  color: var(--hp-on-navy-faint);
  border: 1px solid var(--hp-on-navy-rule);
  padding: 2px 6px;
  border-radius: var(--hp-radius-pill);
}
.hp-tile-locked h4 { color: var(--hp-on-navy); margin: 0 0 var(--hp-space-2); font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-text-lg); }

/* ------------------------------------------------------------------
   Buttons
   Corporate-site direction: ghost-outline primary, sharp corners,
   uppercase Roboto bold, wide letter-spacing.
   ------------------------------------------------------------------ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-2);
  font-family: var(--hp-font-body);
  font-weight: 700;
  font-size: var(--hp-text-xs);
  letter-spacing: var(--hp-tracking-wider);
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--hp-radius-none);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hp-duration) var(--hp-ease),
              color var(--hp-duration) var(--hp-ease),
              border-color var(--hp-duration) var(--hp-ease);
}
/* Primary on dark — the "OUR RESOURCES" pattern */
.hp-btn--primary-on-dark {
  background: transparent;
  color: var(--hp-on-navy);
  border-color: var(--hp-on-navy);
}
.hp-btn--primary-on-dark:hover {
  background: var(--hp-on-navy);
  color: var(--hp-navy);
}
/* Primary on light — the "WHO WE ARE" pattern */
.hp-btn--primary-on-light {
  background: transparent;
  color: var(--hp-navy);
  border-color: var(--hp-navy);
}
.hp-btn--primary-on-light:hover {
  background: var(--hp-navy);
  color: var(--hp-on-navy);
}
/* Accent — solid amber, use for the single most important action only */
.hp-btn--accent {
  background: var(--hp-accent-amber);
  color: var(--hp-on-navy);
  border-color: var(--hp-accent-amber);
}
.hp-btn--accent:hover {
  background: var(--hp-accent-deep);
  border-color: var(--hp-accent-deep);
}
/* Ghost link button */
.hp-btn--link {
  background: transparent;
  color: var(--hp-blue);
  border: 0;
  padding: var(--hp-space-2) 0;
  letter-spacing: var(--hp-tracking-wide);
}
.hp-btn--link:hover { color: var(--hp-navy); }

/* ------------------------------------------------------------------
   Links
   ------------------------------------------------------------------ */
a { color: var(--hp-blue); text-decoration: none; }
a:hover { color: var(--hp-navy); text-decoration: underline; }
.hp-on-dark a { color: var(--hp-on-navy); border-bottom: 1px solid var(--hp-on-navy-rule); }
.hp-on-dark a:hover { color: var(--hp-accent); border-color: var(--hp-accent); }

/* ------------------------------------------------------------------
   Lockup — the horizon.wyth.ai mark
   Wrap your masthead in .hp-lockup; use Option C (subscript) by default.
   ------------------------------------------------------------------ */
.hp-lockup { display: inline-flex; align-items: baseline; gap: var(--hp-space-3); color: var(--hp-on-navy); }
.hp-lockup .hp-lockup__word {
  font-family: var(--hp-font-display);
  font-weight: 900;
  font-size: var(--hp-text-2xl);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.hp-lockup .hp-lockup__word .hp-lockup__dot { color: var(--hp-accent); }
.hp-lockup .hp-lockup__rule { display: inline-block; width: 16px; height: 1px; background: var(--hp-on-navy-rule); }
.hp-lockup .hp-lockup__tag {
  font-family: var(--hp-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--hp-tracking-widest);
  text-transform: uppercase;
  color: var(--hp-on-navy-muted);
}

/* On light backgrounds */
.hp-lockup--on-light { color: var(--hp-navy); }
.hp-lockup--on-light .hp-lockup__rule { background: var(--hp-rule); }
.hp-lockup--on-light .hp-lockup__tag { color: var(--hp-ink-muted); }

/* ------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--hp-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}