/**
 * ==============================================================================
 * DESIGN TOKENS & VARIABLES — IMPACTA HUB (DIGITAM SYSTEM CALIBRATION)
 * ==============================================================================
 * Specifiche di implementazione Impacta Hub.
 * Funzione cromatica trasferita dal blu all'arancione (#FF5B16).
 * Contrasto WCAG AA garantito su tutte le superfici.
 */

:root {
  /* ─── 1. COLOR TOKENS UFFICIALI IMPACTA HUB ─── */
  --white: #ffffff;
  --surface-soft: #f6f6f6;
  --ink: #080808;
  --dark: #0d0d0d;
  --dark-card: #151515;
  --muted: #5f5f5f;
  --muted-on-dark: #b8b8b8;
  --border: #e7e7e7;
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Arancione & Sfumature */
  --orange: #ff5b16;
  --orange-text: #c43c00;
  --orange-dark: #b93604;
  --orange-light: #ff9a5c;
  --orange-wash: #fff1e9;

  /* Hero Gradient & Sfondo Scuro */
  --hero-start: #160b06;
  --hero-mid: #371307;

  /* Compatibilità token preesistenti */
  --color-primary: #ff5b16;
  --color-primary-hover: #b93604;
  --color-primary-rgb: 255, 91, 22;
  --color-secondary: #ff7a00;
  --color-accent: #ff9a5c;
  --color-bg: #ffffff;
  --color-bg-secondary: #f6f6f6;
  --color-bg-muted: #fff1e9;
  --color-foreground: #080808;
  --color-foreground-heading: #080808;
  --color-foreground-body: #5f5f5f;
  --color-border: #e7e7e7;

  /* Raggi di Curvatura */
  --radius-button: 10px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 9999px;

  /* Container & Max Width */
  --content-max: 1280px;
  --reading-max: 896px;
  --cta-max: 768px;
  --interaction-max: 1152px;

  /* ─── 2. TIPOGRAFIA ─── */
  --font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Scala Dimensioni Testo */
  --font-size-watermark: clamp(6rem, 12vw, 10rem);
  --font-size-h1-home: clamp(2.125rem, 4.5vw, 4rem);
  --font-size-h1-page: clamp(2.5rem, 5.5vw, 5.5rem);
  --font-size-h2: clamp(2.125rem, 3.8vw, 3.75rem);
  --font-size-h2-method: clamp(2.375rem, 4.5vw, 4.5rem);
  --font-size-h3: clamp(1.75rem, 2.4vw, 2.25rem);
  --font-size-subtitle: clamp(1.125rem, 1.6vw, 1.5rem);
  --font-size-body: clamp(1rem, 1.2vw, 1.125rem);
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  /* Pesi Tipografici */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.04;
  --line-height-snug: 1.12;
  --line-height-body: 1.6;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-h1: -0.03em;
  --letter-spacing-h2: -0.025em;
  --letter-spacing-uppercase: 0.16em;

  /* ─── 3. OMBRE & PROFONDITÀ ─── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-phone: 0 25px 70px rgba(0, 0, 0, 0.4);
  --shadow-orange-glow: 0 12px 36px rgba(255, 91, 22, 0.35);

  /* ─── 4. TRANSIZIONI & ANIMAZIONI ─── */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.23, 1, 0.32, 1);
}