/* ============================================================
   NÚRIA BOLADERES — BASE & TYPOGRAPHY
   Element defaults + utilities. Built on tokens.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-text);
  font-weight:var(--fw-light);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ---------- Headings ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:var(--fw-light);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  margin:0;
  color:var(--ink);
}
.display{font-size:var(--fs-display);}
h1,.h1{font-size:var(--fs-h1);}
h2,.h2{font-size:var(--fs-h2);}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-snug);}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-snug);}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-light);}
em.accent,.accent-text{color:var(--accent);font-style:italic;}

/* ---------- Body text ---------- */
p{margin:0 0 var(--space-4);max-width:64ch;}
.lead{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--ink);max-width:24ch;}
.body-lg{font-size:var(--fs-lead);}
.body-sm{font-size:var(--fs-sm);}
.text-soft{color:var(--ink-soft);}
.text-faint{color:var(--ink-faint);}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:var(--fw-medium);
  display:inline-flex;align-items:center;gap:var(--space-3);
}
.eyebrow.with-rule::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.8;}
.label{font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-faint);font-weight:var(--fw-medium);}
.mono{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.02em;}

/* ---------- Links ---------- */
.link{color:var(--accent);transition:color var(--dur-fast) var(--ease-out);position:relative;}
.link:hover{color:var(--ink);}
.link-underline{border-bottom:1px solid currentColor;padding-bottom:1px;}

/* ---------- Lists ---------- */
ul.clean,ol.clean{list-style:none;margin:0;padding:0;}
.list-feature{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.list-feature li{position:relative;padding-left:var(--space-5);color:var(--ink-soft);font-size:var(--fs-sm);}
.list-feature li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--accent);}

/* ---------- Blockquote ---------- */
blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-weight:var(--fw-light);font-size:var(--fs-h3);line-height:1.4;color:var(--ink);}

/* ---------- Rules / dividers ---------- */
hr,.divider{border:0;height:1px;background:var(--line-soft);margin:var(--space-6) 0;}
.divider-accent{height:1px;background:linear-gradient(90deg,var(--accent),transparent);}

/* ---------- Utilities ---------- */
.u-center{text-align:center;}
.u-mono-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);}
.stack-1{display:flex;flex-direction:column;gap:var(--space-1);}
.stack-2{display:flex;flex-direction:column;gap:var(--space-2);}
.stack-3{display:flex;flex-direction:column;gap:var(--space-3);}
.stack-4{display:flex;flex-direction:column;gap:var(--space-4);}
.stack-6{display:flex;flex-direction:column;gap:var(--space-6);}
.row{display:flex;align-items:center;gap:var(--space-4);}
.row-wrap{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);}

/* ---------- Containers ---------- */
.container{width:100%;margin-inline:auto;padding-inline:var(--gutter);}
.container.narrow{max-width:calc(var(--container-narrow) + var(--gutter)*2);}
.container.standard{max-width:calc(var(--container-standard) + var(--gutter)*2);}
.container.wide{max-width:calc(var(--container-wide) + var(--gutter)*2);}
.container.full{max-width:none;}

/* ---------- 12-col grid ---------- */
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);}
.col-3{grid-column:span 3;} .col-4{grid-column:span 4;} .col-5{grid-column:span 5;}
.col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;}
.col-9{grid-column:span 9;} .col-12{grid-column:span 12;}
@media(max-width:768px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12;}
}

/* ---------- Section rhythm ---------- */
.section{padding-block:var(--section-y);}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}