/* ============================================================
   Maitha Tech — Base element defaults & shared helpers
   Applies the token system to raw HTML so specimen cards,
   slides and UI kits inherit the brand without extra work.
   ============================================================ */

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

body {
  margin: 0;
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

p { margin: 0 0 1rem; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* —— Brand helpers ———————————————————————————————— */

/* ── Playfair accent + scribble ───────────────────────────────────
   Wrap the ONE word in a heading you want to lift. It is set in
   Playfair italic and ALWAYS carries a hand-drawn scribble behind it,
   in the brand blue (default) or orange. Painted as the element's own
   background so it sits behind the text and ships with this stylesheet
   (the url() resolves for any consumer that links styles.css).         */
.mt-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  display: inline-block;
  background-image: url("../assets/graphics/scribble-5-blue.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0.30em;
  padding: 0 0.05em;
}

/* —— Shape modifiers (curved swoosh = default) ————————————— */
.mt-accent--line      { background-image: url("../assets/graphics/scribble-1-blue.svg"); background-size: 100% 0.18em; padding: 0 0.04em; }
.mt-accent--scratch   { background-image: url("../assets/graphics/scribble-4-blue.svg"); background-size: 102% 0.34em; padding: 0 0.05em; }
.mt-accent--highlight { background-image: url("../assets/graphics/scribble-6-blue.svg"); background-size: 104% 0.42em; padding: 0 0.07em; }
.mt-accent--circle    { background-image: url("../assets/graphics/scribble-2-blue.svg"); background-position: center; background-size: 100% 100%; padding: 0.14em 0.36em; }
.mt-accent--oval      { background-image: url("../assets/graphics/scribble-3-blue.svg"); background-position: center; background-size: 100% 100%; padding: 0.18em 0.4em; }

/* —— Orange variants (swap the file per shape) ————————————— */
.mt-accent--orange                      { background-image: url("../assets/graphics/scribble-5-orange.svg"); }
.mt-accent--line.mt-accent--orange       { background-image: url("../assets/graphics/scribble-1-orange.svg"); }
.mt-accent--scratch.mt-accent--orange    { background-image: url("../assets/graphics/scribble-4-orange.svg"); }
.mt-accent--highlight.mt-accent--orange  { background-image: url("../assets/graphics/scribble-6-orange.svg"); }
.mt-accent--circle.mt-accent--orange     { background-image: url("../assets/graphics/scribble-2-orange.svg"); }
.mt-accent--oval.mt-accent--orange       { background-image: url("../assets/graphics/scribble-3-orange.svg"); }

/* Uppercase eyebrow / kicker label */
.mt-eyebrow {
  font-size: var(--fs-sub);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--lh-sub);
}

/* Display heading utility for hero moments */
.mt-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

/* Signal status dot */
.mt-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--accent);
}

/* ── Dispersion-glass floaters ─────────────────────────────────
   Decorative 3D glass symbols (the brand "símbolos") that drift
   slowly behind content on the ink canvas. Their dark bodies and
   iridescent dispersion rims read as quiet, premium ornament — they
   are AMBIENT, never interactive and never carry meaning. Brand rule:
   ONE símbolo per section — a single .mt-glass inside the field; never
   cluster several. The field fills its positioned parent, clips
   overflow and ignores pointer events; place real content in a
   sibling/child with a higher z-index. Per-floater motion is tuned
   through the --glass-* custom properties. */
.mt-glass-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mt-glass {
  position: absolute;
  display: block;
  width: var(--glass-size, 220px);
  height: auto;
  opacity: var(--glass-opacity, 0.85);
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform: rotate(var(--glass-rot, 0deg));
  animation: mt-glass-float var(--glass-dur, 18s) var(--ease-in-out) var(--glass-delay, 0s) infinite;
}

@keyframes mt-glass-float {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(var(--glass-rot, 0deg)); }
  50%  { transform: translate3d(var(--glass-dx, 12px), var(--glass-dy, -26px), 0)
                   rotate(calc(var(--glass-rot, 0deg) + var(--glass-spin, 8deg))); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}