/*
Theme Name: TurboFisco per Kadence
Theme URI: https://turbofisco.it/blog
Description: Child theme di Kadence per il blog di TurboFisco. Replica lo stile visivo della landing page turbofisco.it (Lovable/React) sul blog WordPress, senza modificare il markup HTML generato da Kadence.
Author: TurboFisco
Author URI: https://turbofisco.it
Template: kadence
Version: 1.2.2
Text Domain: turbofisco-kadence-child
Requires PHP: 7.4
*/

/* ==========================================================================
   DESIGN TOKEN — estratti dal CSS compilato di turbofisco.it (bundle
   /assets/styles-*.css, Tailwind v4 + shadcn/ui), non inventati.
   Fonte: fetch diretto del sito il 23/07/2026.
   ========================================================================== */

:root {
  /* Colori di brand */
  --tf-navy: #0f2b4c;          /* colore primario: header nav, testo forte, bottone secondario, footer */
  --tf-navy-dark: #0a2038;      /* hover su elementi navy */
  --tf-amber: #f99c00;          /* accent/CTA primario (resa a schermo del token amber-500 della landing) */
  --tf-amber-dark: #d98600;     /* hover su bottoni amber */
  --tf-amber-light: #fde7c2;    /* sfondi soft per badge/hover chiari */
  --tf-warm: #fff8f0;           /* sfondo caldo principale (bg-warm) */
  --tf-warm-soft: #f8f4f0;      /* sfondo caldo alternato tra sezioni (bg-warm-soft) */
  --tf-white: #ffffff;
  --tf-text: #111827;           /* testo body (gray-900) */
  --tf-text-muted: #4b5563;     /* testo secondario (gray-600) */
  --tf-text-subtle: #6b7280;    /* testo terziario (gray-500) */
  --tf-border: #e5e7eb;         /* bordi chiari (gray-200) */

  /* Font — vedi assets/css/fonts.css per i @font-face locali */
  --tf-font-heading: 'TF Outfit', ui-sans-serif, system-ui, sans-serif;
  --tf-font-body: 'TF Inter', ui-sans-serif, system-ui, sans-serif;
  --tf-font-mono: 'TF JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Raggi — stessa base della landing (--radius: .625rem) */
  --tf-radius-sm: 0.375rem;   /* calc(base - 4px) */
  --tf-radius-md: 0.5rem;     /* calc(base - 2px) */
  --tf-radius-lg: 0.625rem;   /* base */
  --tf-radius-xl: 0.875rem;   /* calc(base + 4px) */
  --tf-radius-2xl: 1.125rem;  /* calc(base + 8px) */
  --tf-radius-full: 9999px;

  /* Ombre calde (amber + navy sovrapposti a bassa opacita', usate sui bottoni CTA) */
  --tf-shadow-soft: 0 6px 14px -6px rgba(249, 156, 0, 0.4), 0 3px 8px -3px rgba(15, 43, 76, 0.3);
  --tf-shadow-glow: 0 18px 38px -10px rgba(249, 156, 0, 0.55), 0 8px 18px -6px rgba(15, 43, 76, 0.35);
  --tf-shadow-card: 0 1px 2px rgba(15, 43, 76, 0.06), 0 4px 16px rgba(15, 43, 76, 0.06);

  /* Layout */
  --tf-container-max: 80rem; /* 1280px, max-w-7xl della landing */
  --tf-section-py: clamp(3rem, 6vw, 5rem); /* py-20 lg:py-28 della landing, fluido */

  /*
   * Mappatura best-effort sulle CSS custom properties globali del tema
   * Kadence (Personalizza > Colori e font > Colori, 9 slot --global-palette1..9).
   * Ordine convenzionale Kadence: 1-2 accent, 3-4 dark/contrasto forte,
   * 5-6 toni medi, 7-9 sfondi chiari/bianco. Non e' documentato in modo
   * identico in ogni versione di Kadence: dopo l'attivazione, controlla in
   * Personalizza che i colori mostrati corrispondano e aggiusta a vista se
   * una versione piu' vecchia/nuova assegna i ruoli in modo leggermente
   * diverso. I bottoni Kadence Blocks, i "Advanced Heading" ecc. che usano
   * la palette globale erediteranno comunque questi colori.
   */
  --global-palette1: var(--tf-amber);
  --global-palette2: var(--tf-amber-dark);
  --global-palette3: var(--tf-navy);
  --global-palette4: var(--tf-navy-dark);
  --global-palette5: var(--tf-text-muted);
  --global-palette6: var(--tf-text-subtle);
  --global-palette7: var(--tf-warm-soft);
  --global-palette8: var(--tf-warm);
  --global-palette9: var(--tf-white);
}

/* ==========================================================================
   BASE — tipografia e reset leggero. Nessuna riscrittura della struttura
   HTML di Kadence: solo colori, font, spaziature sugli stessi elementi.
   ========================================================================== */

body {
  font-family: var(--tf-font-body);
  color: var(--tf-text);
  background-color: var(--tf-warm);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--tf-font-heading);
  color: var(--tf-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--tf-navy);
}

a:hover,
a:focus {
  color: var(--tf-amber-dark);
}

::selection {
  background-color: var(--tf-amber-light);
  color: var(--tf-navy);
}

code, pre, kbd, samp,
.tf-mono {
  font-family: var(--tf-font-mono);
}

/* L'area contenuto dell'articolo resta su sfondo bianco per leggibilita' nella
   lettura lunga: il caldo bg-warm della landing e' riservato a header, hero
   ed elementi di cornice (vedi components.css), non al testo dell'articolo. */
.content-container,
.entry-content {
  background-color: var(--tf-white);
}