/* ============================================================
   Sanro IT — Base styles
   Reset + global typography + utility primitives.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  font-weight: 400;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

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

ul, ol { list-style: none; }

/* HTML `hidden` attribute must win against high-specificity `display: flex/grid` */
[hidden] { display: none !important; }

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ----- Typography utilities ----- */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.h1 { font-size: var(--fs-120); }
.h2 { font-size: var(--fs-88); }
.h3 { font-size: var(--fs-72); }
.h4 { font-size: var(--fs-56); }
.h5 { font-size: var(--fs-48); }
.h6 { font-size: var(--fs-36); }

.lead {
  font-size: var(--fs-22);
  line-height: var(--lh-normal);
  color: var(--ink-muted);
  max-width: 60ch;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink-hair);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-9);
}

.section-tight {
  padding-block: var(--space-7);
}

.section-loose {
  padding-block: var(--space-10);
}

.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ----- Reveal-on-scroll utility (handled by JS) ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-cinematic) var(--ease-out),
    transform var(--t-cinematic) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Stagger children helper ----- */
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ----- Tint backgrounds (utility) ----- */
.tint-lavender { background: var(--lavender); }
.tint-peach    { background: var(--peach); }
.tint-mint     { background: var(--mint); }
.tint-cream    { background: var(--cream); }

/* ----- Hairline rule ----- */
.hairline {
  border: none;
  height: 1px;
  background: var(--ink-hair);
}

/* ----- Visually hidden (accessible) ----- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}