/* ============================================================
   DE NITTO COSTRUZIONI — Design tokens, base, primitives
   3 temi colore: calce (default) · terra · cantiere
   ============================================================ */

/* ---- Non-theme tokens ---- */
:root{
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 132px);

  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;

  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --head-weight: 700;
  --head-tracking: -0.02em;

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .45s var(--ease);
}

/* Editorial heading variant (Tweak) */
:root[data-head="editorial"]{
  --font-head: "Newsreader", Georgia, serif;
  --head-weight: 500;
  --head-tracking: -0.01em;
}

/* ===== THEME: CALCE (warm concrete neutrals + clay) ===== */
:root[data-theme="calce"]{
  --bg:      oklch(0.969 0.006 80);
  --bg-2:    oklch(0.992 0.004 85);
  --bg-soft: oklch(0.945 0.008 78);
  --ink:     oklch(0.245 0.012 60);
  --ink-2:   oklch(0.44 0.012 62);
  --muted:   oklch(0.58 0.010 64);
  --line:    oklch(0.882 0.008 72);
  --line-2:  oklch(0.815 0.010 72);
  --accent:      oklch(0.565 0.124 47);
  --accent-2:    oklch(0.50 0.118 45);
  --accent-ink:  oklch(0.985 0.004 85);
  --accent-soft: oklch(0.93 0.022 55);

  --d-bg:    oklch(0.225 0.012 62);
  --d-bg-2:  oklch(0.275 0.012 62);
  --d-ink:   oklch(0.965 0.006 80);
  --d-ink-2: oklch(0.78 0.010 72);
  --d-line:  oklch(0.36 0.012 62);
}

/* ===== THEME: TERRA DI PUGLIA (sand + terracotta) ===== */
:root[data-theme="terra"]{
  --bg:      oklch(0.952 0.018 72);
  --bg-2:    oklch(0.978 0.012 74);
  --bg-soft: oklch(0.925 0.022 68);
  --ink:     oklch(0.285 0.030 50);
  --ink-2:   oklch(0.46 0.030 50);
  --muted:   oklch(0.585 0.026 52);
  --line:    oklch(0.862 0.022 64);
  --line-2:  oklch(0.79 0.026 60);
  --accent:      oklch(0.565 0.142 44);
  --accent-2:    oklch(0.495 0.132 42);
  --accent-ink:  oklch(0.984 0.008 80);
  --accent-soft: oklch(0.90 0.038 52);

  --d-bg:    oklch(0.262 0.034 44);
  --d-bg-2:  oklch(0.318 0.034 44);
  --d-ink:   oklch(0.962 0.014 74);
  --d-ink-2: oklch(0.79 0.026 60);
  --d-line:  oklch(0.40 0.030 46);
}

/* ===== THEME: CANTIERE (slate + amber safety) ===== */
:root[data-theme="cantiere"]{
  --bg:      oklch(0.968 0.005 240);
  --bg-2:    oklch(0.995 0.002 240);
  --bg-soft: oklch(0.940 0.008 240);
  --ink:     oklch(0.255 0.022 252);
  --ink-2:   oklch(0.43 0.022 250);
  --muted:   oklch(0.565 0.018 248);
  --line:    oklch(0.880 0.008 244);
  --line-2:  oklch(0.805 0.012 246);
  --accent:      oklch(0.655 0.148 66);
  --accent-2:    oklch(0.585 0.140 60);
  --accent-ink:  oklch(0.21 0.03 252);
  --accent-soft: oklch(0.92 0.038 78);

  --d-bg:    oklch(0.238 0.030 252);
  --d-bg-2:  oklch(0.292 0.032 252);
  --d-ink:   oklch(0.965 0.006 240);
  --d-ink-2: oklch(0.78 0.014 246);
  --d-line:  oklch(0.37 0.026 252);
}

/* ---- Dark surface: remap base vars so components restyle automatically ---- */
.on-dark{
  --bg:    var(--d-bg);
  --bg-2:  var(--d-bg-2);
  --bg-soft: var(--d-bg-2);
  --ink:   var(--d-ink);
  --ink-2: var(--d-ink-2);
  --muted: var(--d-ink-2);
  --line:  var(--d-line);
  --line-2: var(--d-line);
  background: var(--d-bg);
  color: var(--d-ink);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:var(--head-weight);
  letter-spacing:var(--head-tracking);
  line-height:1.04;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0;
}
.eyebrow::before{
  content:"";
  width:24px; height:1px;
  background:currentColor;
  display:inline-block;
}
.on-dark .eyebrow{ color:var(--accent); }

.section-head{ max-width:760px; }
.section-head h2{
  font-size:clamp(2rem,3.6vw,3.05rem);
  margin-top:.55em;
}
.section-head .lead{
  margin-top:1.1rem;
  font-size:clamp(1.05rem,1.5vw,1.22rem);
  color:var(--ink-2);
  max-width:62ch;
}

.index-tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--muted);
}

/* ---- Buttons ---- */
.btn{
  --bh: 54px;
  display:inline-flex;
  align-items:center;
  gap:.65em;
  height:var(--bh);
  padding:0 1.6rem;
  border-radius:var(--r);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.005em;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-2); transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line-2);
}
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--bg-2); }
.btn--dark:hover{ transform:translateY(-2px); opacity:.9; }
.btn--sm{ --bh:42px; font-size:.92rem; padding:0 1.1rem; }
.btn--lg{ --bh:60px; font-size:1.08rem; padding:0 2rem; }

/* ---- Labeled placeholder (for client photos) ---- */
.ph{
  position:relative;
  --ph-line: color-mix(in oklch, var(--ink) 12%, transparent);
  background-color:var(--bg-soft);
  background-image: repeating-linear-gradient(135deg,
      var(--ph-line) 0 1.5px, transparent 1.5px 13px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
}
.ph::after{
  content:attr(data-label);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:.5em .85em;
  text-align:center;
  max-width:80%;
  line-height:1.3;
}
.on-dark .ph{ --ph-line: color-mix(in oklch, #fff 14%, transparent); }

/* ---- Reveal on scroll ----
   Base state is VISIBLE. The hidden start state is only applied under
   html.anim (added by JS), so anything that fails leaves content shown.
   html.no-tick (set by JS when the environment freezes animations) forces
   everything visible instantly. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html.anim .reveal{
    opacity:0; transform:translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  html.anim .reveal.in{ opacity:1; transform:none; }
  html.anim .reveal[data-d="1"]{ transition-delay:.08s; }
  html.anim .reveal[data-d="2"]{ transition-delay:.16s; }
  html.anim .reveal[data-d="3"]{ transition-delay:.24s; }
  html.anim .reveal[data-d="4"]{ transition-delay:.32s; }
}
html.no-tick .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- Animations off (Tweak) ---- */
.no-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.no-anim .strip__inner{ animation:none !important; }