/*
 * ZHS Ecom - Landing Page Design System (shared token + component layer)
 * ---------------------------------------------------------------------------
 * Canonical, portable CSS for ZHS marketing landing pages. Link this file from
 * any standalone landing page (static HTML in /public or a new route) to inherit
 * the brand tokens and primary components without re-deriving them.
 *
 *   <link rel="stylesheet" href="/assets/zhs-design-system.css">
 *
 * The human/AI guide that explains WHEN and HOW to use these tokens lives at
 * docs/landing-page-design-system.md. Read it before building or restyling a
 * public landing page.
 *
 * These --zhs-* names are the single source of truth. The Next app
 * (src/styles/globals.css) and the static homepage (public/index.html) both
 * alias their local variables to these, so every ZHS surface speaks one
 * vocabulary. Values here MUST stay identical to the aliases in those files.
 */

:root {
  /* -- Brand blues ------------------------------------------------------- */
  --zhs-blue: #3d6cff;          /* primary brand blue (gradient start)      */
  --zhs-blue-hi: #6f8eff;       /* gradient end / lighter brand blue        */
  --zhs-blue-accent: #8da7ff;   /* solid accent for labels, icons, metadata */

  /* -- The one brand gradient -------------------------------------------
   * Used for BOTH primary CTA backgrounds and selective headline text
   * accents. Shape/context tells the two apart (a filled pill = an action;
   * gradient-clipped words inside a heading = emphasis). There is no second
   * gradient. Static/secondary accents use the solid --zhs-blue-accent. */
  --zhs-gradient: linear-gradient(135deg, var(--zhs-blue) 0%, var(--zhs-blue-hi) 100%);

  /* -- Hero background wash (asymmetric, soft, top-right weighted) -------- */
  --zhs-hero-wash:
    radial-gradient(circle at 78% -2rem, rgba(61, 108, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 12% 12rem, rgba(61, 108, 255, 0.06), transparent 40rem);

  /* -- Restrained CTA depth (no heavy neon glow) ------------------------- */
  --zhs-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 20px rgba(61, 108, 255, 0.2);
  --zhs-cta-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 26px rgba(61, 108, 255, 0.28);

  /* -- Shared radii ------------------------------------------------------ */
  --zhs-radius-pill: 980px;
  --zhs-radius-card: 16px;
}

/* ============================================================
 * Components (opt-in). Prefix everything with .zhs- so these can
 * be dropped onto any page without colliding with page-local class names.
 * ============================================================ */

/* Primary call to action: the one gradient, as a filled pill. Works on both an
 * <a> and a <button>: a button gets its native border/background/font reset and a
 * pointer cursor, so an anchor CTA and a form-submit CTA render identically. */
.zhs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--zhs-gradient);
  color: #fff;
  border: 0;
  padding: 16px 34px;
  border-radius: var(--zhs-radius-pill);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--zhs-cta-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.zhs-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--zhs-cta-shadow-hover);
  filter: brightness(1.04);
}
.zhs-cta:focus-visible {
  outline: 2px solid var(--zhs-blue-accent);
  outline-offset: 3px;
}

/* Headline emphasis: the same gradient, clipped to text. Put on a <span>
 * wrapping the emphasized WORDS inside a major heading, never the whole
 * heading and never body copy. The solid color on the element is the
 * fallback so text stays readable where background-clip:text is unsupported
 * or where forced-colors mode is active. */
.zhs-grad-text {
  color: var(--zhs-blue-accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .zhs-grad-text {
    background: var(--zhs-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* Forced-colors / high-contrast: drop the clip so the phrase keeps a solid,
 * system-legible color instead of rendering transparent. */
@media (forced-colors: active) {
  .zhs-grad-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--zhs-blue-accent);
  }
}

/* Static/secondary accent: small labels, eyebrows, icons, metadata. */
.zhs-accent {
  color: var(--zhs-blue-accent);
}

/* Asymmetric hero/background wash helper. Apply to the page/body or a hero. */
.zhs-hero-wash {
  background-image: var(--zhs-hero-wash);
}

/* Accessibility: honor reduced-motion for the shared component transitions. */
@media (prefers-reduced-motion: reduce) {
  .zhs-cta {
    transition: none;
  }
  .zhs-cta:hover {
    transform: none;
  }
}