/* ============================================================
   AXIS WEBPRO | BASE.CSS
   Resets, body defaults, layout primitives. References tokens.css.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
  margin-block-start: 0;
  margin-block-end: var(--space-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

/* Paragraph defaults */
p {
  margin-block-start: 0;
  margin-block-end: var(--space-4);
  max-inline-size: var(--max-inline-body);
}

/* Links */
a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--motion-duration-base) var(--motion-easing);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-accent);
  }
}

a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
  margin-block-start: 0;
  margin-block-end: var(--space-4);
  padding-inline-start: var(--space-5);
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-inline-start: 0;
}

/* Images */
img, picture, svg, video {
  display: block;
  max-inline-size: 100%;
  height: auto;
}

/* Container */
.container {
  inline-size: min(100% - var(--space-5) * 2, 1200px);
  margin-inline: auto;
}

/* Section spacing */
section {
  padding-block: var(--space-section-mobile);
}

@media (min-width: 48em) {
  section {
    padding-block: var(--space-section-desktop);
  }
}

/* Eyebrow */
.eyebrow {
  display: inline-block;
  color: var(--eyebrow-color);
  font-size: var(--fs-small);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  margin-block-end: var(--space-3);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  z-index: 100;
}
.skip-link:focus {
  inset-block-start: var(--space-3);
}

/* ============================================================
   DECORATION LAYER (2026-05-20 Premium Polish Pass)
   Additive backgrounds, patterns, and scroll reveals. All colors
   via color-mix on tokens. Pointer-events disabled on pseudos.
   ============================================================ */
.bg-mesh {
  position: relative;
  background:
    radial-gradient(at 20% 30%, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 50%),
    radial-gradient(at 80% 60%, color-mix(in srgb, var(--color-accent) 7%, transparent) 0%, transparent 50%),
    var(--color-surface);
}
.bg-mesh-dark {
  position: relative;
  background:
    radial-gradient(at 20% 30%, color-mix(in srgb, var(--color-secondary) 25%, transparent) 0%, transparent 50%),
    radial-gradient(at 80% 60%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 50%),
    var(--color-primary);
}
.bg-dots-light,
.bg-dots-dark { position: relative; overflow: hidden; }
.bg-dots-light::before,
.bg-dots-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 70%);
          mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bg-dots-light::before {
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 10%, transparent) 1.5px, transparent 1.5px);
}
.bg-dots-dark::before {
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--color-base) 14%, transparent) 1.5px, transparent 1.5px);
}
.bg-mesh > *,
.bg-mesh-dark > *,
.bg-dots-light > *,
.bg-dots-dark > * { position: relative; z-index: 1; }

/* AXIS coordinate-cross signature mark (inline SVG, watermark) */
.axis-mark {
  display: inline-block;
  inline-size: 56px;
  block-size: 56px;
  color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  pointer-events: none;
}
.axis-mark.is-on-dark { color: color-mix(in srgb, var(--color-base) 18%, transparent); }
.axis-mark svg { inline-size: 100%; block-size: 100%; display: block; }

/* Gradient accent divider between major sections */
.section-divider {
  block-size: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
  opacity: 0.5;
}

/* Scroll reveal: .is-visible added by scroll-reveals.js.
   <noscript> fallback in <head> guarantees visibility without JS. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing),
    transform var(--motion-duration-slow) var(--motion-easing);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}