/* =====================================================================
   B2B Marketing Compass — tokens.css
   Design DNA TWOW (editorial, light, multichrome). Brand-level, stabile.
   I componenti vivono in app.css; qui solo token + reset + primitive type.
   ===================================================================== */

/* Font: caricati in <head> via preconnect + <link> (vedi index.html).
   Niente @import qui: creava una catena di richieste render-blocking. */

:root {
  /* Surfaces */
  --paper:     #F4F2EC;
  --paper-2:   #ECEAE2;
  --white:     #ffffff;
  --ink:       #111111;
  --ink-soft:  #4A4A46;
  --ink-faint: #8A8A82;
  --rule:      #111111;
  --rule-soft: #C9C7BE;

  /* Multichrome accents (DNA www.twow.it) */
  --coral:  #FF5553;
  --pink:   #FF95A4;
  --yellow: #FFEA8D;
  --teal:   #3A95AA;
  --blue:   #204CE5;
  --green:  #54896A;
  --wine:   #A45560;

  /* app.js engine reads these var names in shared assets — alias kept */
  --twow-coral: var(--coral);
  --twow-pink: var(--pink);
  --twow-yellow: var(--yellow);
  --twow-blue: var(--teal);
  --twow-green: var(--green);
  --twow-dark: var(--ink);

  /* Type */
  --font-display: 'Bebas Neue', 'Inter', sans-serif;
  --font-text:    'Inter', sans-serif;

  /* Spacing — 8pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 112px;

  /* Editorial hard-offset shadow (print-style depth, non soffuso) */
  --shadow-hard:    6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-hard-lg: 12px 12px 0 var(--ink);   /* stato hover/lift */
  --shadow-color:   10px 10px 0 var(--coral);  /* accento per cover/feature */

  /* Texture carta — griglia tipografica appena percettibile (premium print) */
  --grid-line: rgba(17,17,17,0.045);
  --grid-size: 32px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --t-fast: 0.18s var(--ease);
  --t-mid:  0.36s var(--ease);
  --t-slow: 0.6s var(--ease);
  --t-flip: 0.8s var(--ease);

  --maxw: 1240px;
  --z-nav: 50; --z-overlay: 100; --z-toast: 1000;
}

/* Texture griglia leggera applicabile a superfici "paper" (additiva, opt-in) */
.has-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

a { color: var(--ink); text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }

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

/* Focus visibile (a11y) — editorial, spesso */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.on-dark :focus-visible, .panel--navy :focus-visible { outline-color: var(--yellow); }

/* ── Type primitives ─────────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em;
}
.t-eyebrow {
  font-family: var(--font-text); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.t-body { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-soft); line-height: 1.55; }
.t-body strong { color: var(--ink); font-weight: 700; }

/* Display "outline": numerali/parole giganti svuotati, motivo editoriale */
.t-outline {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: 0.8; color: transparent;
  -webkit-text-stroke: 2px var(--ink); text-stroke: 2px var(--ink);
}

/* ── Shared button primitives ────────────────────────────────────── */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-text); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--white);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn-pill:hover:not(:disabled) { background: var(--coral); border-color: var(--coral); transform: translateY(-2px); }
.btn-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-pill--ghost { background: transparent; color: var(--ink); }
.btn-pill--ghost:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); transform: none; }

.btn-circle {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 168px; height: 168px; border-radius: 50%; padding: 0 18px;
  background: var(--coral); color: var(--white); border: none; cursor: pointer;
  font-family: var(--font-text); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: transform var(--t-mid) var(--spring), background var(--t-fast);
}
.btn-circle:hover:not(:disabled) { transform: scale(1.06); background: var(--ink); }
.btn-circle:disabled { background: var(--paper-2); color: var(--ink-faint); border: 1px solid var(--rule-soft); cursor: not-allowed; transform: none; }

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