/*
 * Studio Legale Saltelli & Partners — Design Tokens (locked)
 * Fonte di verità: .claude/knowledge/design/sessione-1/tokens.css (Sessione 1)
 *
 * Contiene SOLO :root (CSS variables) + reset scoped .sl-root.
 * I components live in components.css.
 */

:root {
  /* Color */
  --background: #FAFAF8;
  --surface: #F2F0EA;
  --primary: #1B2B4B;
  --accent: #B8860B;
  --text: #2D2D2D;
  --text-muted: #6B6B6B;
  --border: #E5E0D5;

  /* Typography */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", "Satoshi", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (responsive clamp) */
  --fs-display: clamp(48px, 8vw, 120px);
  --fs-h1: clamp(36px, 5vw, 64px);
  --fs-h2: clamp(28px, 3.5vw, 44px);
  --fs-h3: clamp(20px, 2vw, 28px);
  --fs-body: clamp(16px, 1.1vw, 18px);
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-mono: 0.08em;

  /* Spacing scale (8-base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --s-10: 192px;

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(24px, 5vw, 96px);
  --gap-desktop: 32px;
  --gap-tablet: 24px;
  --gap-mobile: 16px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* Legacy aliases — back-compat con scaffold base.css esistente */
  --color-bg: var(--background);
  --color-primary: var(--primary);
  --color-accent: var(--accent);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border);
  --container-padding: var(--container-pad);
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: 12px;
  --space-4: var(--s-3);
  --space-6: var(--s-4);
  --space-8: var(--s-5);
  --space-12: var(--s-6);
  --space-16: var(--s-7);
  --space-24: var(--s-8);

  /* ─────────────────────────────────────────────────────────────
     Layout Harmonization v0.12.0 (audit CRO 8/10 target)
     - Container UNIFICATO 1440 max + clamp pad
     - Scala 8px (sl- prefix per non collidere con legacy)
     - Hero spacing per gap header→hero coerente
     ───────────────────────────────────────────────────────────── */
  --sl-container-max: var(--container-max);
  --sl-container-pad: var(--container-pad);

  --sl-space-1: 8px;
  --sl-space-2: 16px;
  --sl-space-3: 24px;
  --sl-space-4: 32px;
  --sl-space-5: 48px;
  --sl-space-6: 64px;
  --sl-space-7: 80px;
  --sl-space-8: 96px;
  --sl-space-9: 128px;

  --space-hero-top: clamp(64px, 8vw, 120px);
  --space-hero-bottom: clamp(48px, 6vw, 80px);
}

/* Smooth scroll globale (audit CRO §11) — opt-out automatico per reduced-motion */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Base reset (scoped al wrapper .sl-root) */
.sl-root,
.sl-root * {
  box-sizing: border-box;
}

.sl-root {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.sl-root h1,
.sl-root h2,
.sl-root h3,
.sl-root h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  color: var(--primary);
  /* Display: kerning + ligature + alternate stylistic set per Playfair Display */
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "ss01" 1;
}

.sl-root p { margin: 0; }
.sl-root a { color: inherit; text-decoration: none; }

/*
 * Focus-visible globale — keyboard-only outline accent (oro bronzo).
 * Unica regola che copre tutti gli elementi interattivi del tema senza
 * richiedere modifiche per-component. Fix Impeccable Step C [P1].
 */
.sl-root :focus-visible,
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.sl-root :focus:not(:focus-visible) {
  outline: none;
}