/* ============================================================
   Olimpiada Tangram - Base helpers & signature utilities
   Opt-in classes (no aggressive global reset). These ship to
   consumers alongside the tokens.
   ============================================================ */

:root {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Brand grounds ---------------------------------------- */
.tg-bg-navy      { background: var(--tg-navy); color: var(--tg-text); }
.tg-bg-hero      { background: var(--tg-gradient-hero); color: var(--tg-text); }
.tg-bg-gradient  { background: var(--tg-gradient-navy); color: var(--tg-text); }
.tg-bg-purple    { background: var(--tg-gradient-purple); color: var(--tg-text); }
.tg-bg-light     { background: var(--tg-bg-light); color: var(--tg-text-on-light); }
.tg-bg-cloud     { background: var(--tg-cloud); color: var(--tg-text-on-light); }

/* Tangram texture overlay - set as a background layer.
   Recolour via `color` (the SVG uses currentColor). */
.tg-pattern {
  position: relative;
  isolation: isolate;
}
.tg-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tg-pattern-image, none);
  background-size: cover;
  opacity: var(--tg-pattern-opacity, 0.14);
  z-index: -1;
  pointer-events: none;
}

/* ---- Signature highlight marker --------------------------
   Wrap a keyword to get the brand's "marker" swipe. Gradient-only:
   - default (.tg-mark)          -> navy gradient, white text  (use on LIGHT grounds)
   - .tg-mark--on-dark           -> cyan gradient, navy text   (use on DARK/navy grounds)
   Padding hugs the glyphs tightly.                              */
.tg-mark {
  background: linear-gradient(150deg, #0a0080 0%, #1234a8 100%);
  color: var(--tg-white);
  padding: 0.05em 0.2em;
  border-radius: 0.3em;
  line-height: 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: var(--tg-weight-extra);
}
.tg-mark--on-dark { background: linear-gradient(150deg, #a7dff4 0%, #00bcff 100%); color: var(--tg-navy); }
/* Titles that contain a marker need clearance so the swipe never overlaps the
   line above/below. Apply .tg-headline--mark (or line-height >= 1.2) on them. */
.tg-headline--mark { line-height: 1.24; }

/* Text-colour keyword (no marker) - for coloured words in headlines */
.tg-hl-yellow { color: var(--tg-yellow); }
.tg-hl-lime   { color: var(--tg-lime); }
.tg-hl-cyan   { color: var(--tg-cyan); }
.tg-hl-purple { color: var(--tg-purple-light); }

/* ---- Display / heading shortcuts -------------------------- */
.tg-display {
  font-family: var(--tg-font-display);
  font-weight: 400;
  line-height: var(--tg-leading-tight);
  letter-spacing: var(--tg-tracking-normal);
  text-transform: uppercase;
}
.tg-headline {
  font-family: var(--tg-font-heading);
  font-weight: var(--tg-weight-black);
  line-height: var(--tg-leading-tight);
  letter-spacing: var(--tg-tracking-tight);
  text-transform: uppercase;
}
.tg-eyebrow {
  font-family: var(--tg-font-heading);
  font-weight: var(--tg-weight-bold);
  font-size: var(--tg-text-sm);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
}

/* ---- Layout ---- */
.tg-container {
  width: 100%;
  max-width: var(--tg-container);
  margin-inline: auto;
  padding-inline: var(--tg-gutter);
}