/* ============================================================
   UNO — Università a Oristano · Base layer
   Minimal reset + element defaults + a few brand utility classes.
   Everything here is driven by the design tokens.
   ============================================================ */

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

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

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

::selection {
  background: var(--teal-200);
  color: var(--uno-navy);
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.4em;
  color: var(--text-strong);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: var(--fw-bold); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-bold); }
h6 { font-size: var(--text-md); font-weight: var(--fw-bold); }

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

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--fw-bold); }
small { font-size: var(--text-sm); }

img, svg, video { display: block; max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ============================================================
   Brand utility classes
   ============================================================ */

/* "Occhiello" — the eyebrow/kicker above a heading */
.uno-eyebrow {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--uno-teal);
}

/* Display heading helper */
.uno-display {
  font-weight: var(--fw-extrabold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}

/* The signature accent: an emphasised word inside a heading,
   set in bold italic + teal. */
.uno-accent {
  font-style: italic;
  color: var(--uno-teal);
}
.uno-accent--cream { color: var(--uno-cream); }

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

/* Section background helpers */
.uno-surface-cream   { background: var(--surface-page);    color: var(--text-body); }
.uno-surface-card    { background: var(--surface-card);    color: var(--text-body); }
.uno-surface-navy    { background: var(--surface-inverse); color: var(--text-on-dark); }
.uno-surface-teal    { background: var(--surface-brand);   color: var(--text-on-brand); }
.uno-surface-navy h1, .uno-surface-navy h2, .uno-surface-navy h3,
.uno-surface-teal h1, .uno-surface-teal h2, .uno-surface-teal h3 { color: inherit; }

/* The "onda" mesh texture as a faint background.
   Use behind sections; keep it subtle. */
.uno-texture {
  position: relative;
  isolation: isolate;
}
.uno-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/graphics/wave-pattern-navy.svg");
  background-size: 480px;
  opacity: 0.06;
  pointer-events: none;
}
.uno-texture--teal::before  { background-image: url("../assets/graphics/wave-pattern-teal.svg"); }
.uno-texture--cream::before { background-image: url("../assets/graphics/wave-pattern-cream.svg"); opacity: 0.10; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}