/*
 * TGH Software — Tema globale: palette, font e token di stile
 * ------------------------------------------------------------
 * Questo file è l'unico punto di personalizzazione del tema del sito.
 * Contiene le custom properties CSS consumate da tutti i fogli di stile
 * (style.css e componenti del tema) e condivise da tutte le pagine.
 *
 * I valori riprendono esattamente le custom properties che erano
 * definite inline (blocco <style>) in ogni pagina: il contenuto non
 * cambia, cambia solo il punto in cui è dichiarato.
 *
 * NOTA: file mantenuto a mano — NON è generato da SCSS e NON deve essere
 * sovrascritto dalla compilazione Prepros (vedere docs/index-components.md).
 * Ordine di caricamento nelle pagine: vendor.css -> theme.css -> style.css
 * (lo stesso che avevano i blocchi inline, per non alterare la cascata).
 */

:root {
  /* Typography */
  --font-body--family: "Inter", sans-serif;
  --font-body--style: normal;
  --font-body--weight: 400;

  --font-heading--family: "Poppins", sans-serif;
  --font-heading--style: normal;
  --font-heading--weight: 600;

  --font-button--family: "Poppins", sans-serif;
  --font-button--style: normal;
  --font-button--weight: 600;

  /* h1-h6 */
  --font-h1--size: 60px;
  --font-h2--size: 48px;
  --font-h3--size: 36px;
  --font-h4--size: 24px;
  --font-h5--size: 20px;
  --font-h6--size: 16px;

  /* header nav */
  --font-nav-main: 16px;

  /* Semantic palette */
  --color-brand-primary: #3985C6;
  --color-background-dark: #0D1B2A;
  --color-background-dark-secondary: #173B5C;
  --color-background-light: #EAF2FA;
  --color-background-neutral: #E7E7E7;
  --color-cta: #0D1B2A;
  --color-foreground-muted: #8FA6B8;
  --color-foreground-on-dark: #FFFFFF;
  --color-foreground: var(--color-background-dark);
  --color-foreground-heading: var(--color-background-dark);
  --color-foreground-subheading: var(--color-foreground-muted);
  --color-background: var(--color-background-light);
  --color-background-subheading: rgba(255, 255, 255, 0.1);
  --color-border-subheading-bg: rgba(23, 59, 92, 0.1);
  --color-primary: var(--color-brand-primary);
  --color-primary-background: var(--color-background-dark);
  --color-primary-hover: var(--color-brand-primary);
  --color-primary-background-hover: var(--color-background-dark-secondary);
  --color-border: rgba(255, 255, 255, 0.3);
  --color-border-hover: rgba(143, 166, 184, 0.5);
  --color-shadow: rgba(13, 27, 42, 0.25);
  --color-overlay: rgba(13, 27, 42, 0.6);

  /* Palette alpha tokens for component-level overlays and borders */
  --color-brand-primary-alpha-10: rgba(57, 133, 198, 0.1);
  --color-brand-primary-alpha-20: rgba(57, 133, 198, 0.2);
  --color-brand-primary-alpha-30: rgba(57, 133, 198, 0.3);
  --color-background-dark-alpha-10: rgba(13, 27, 42, 0.1);
  --color-background-dark-alpha-20: rgba(13, 27, 42, 0.2);
  --color-background-dark-alpha-30: rgba(13, 27, 42, 0.3);
  --color-background-dark-alpha-40: rgba(13, 27, 42, 0.4);
  --color-background-dark-alpha-70: rgba(13, 27, 42, 0.7);
  --color-background-dark-secondary-alpha-10: rgba(23, 59, 92, 0.1);
  --color-background-dark-secondary-alpha-20: rgba(23, 59, 92, 0.2);
  --color-background-dark-secondary-alpha-30: rgba(23, 59, 92, 0.3);
  --color-foreground-muted-alpha-10: rgba(143, 166, 184, 0.1);
  --color-foreground-muted-alpha-30: rgba(143, 166, 184, 0.3);
  --color-foreground-on-dark-alpha-60: rgba(255, 255, 255, 0.6);
  --color-foreground-on-dark-alpha-70: rgba(255, 255, 255, 0.7);

  /* Buttons */
  --font-button-size: 16px;
  --font-button-size-mobile: 16px;
  --style-button-height: 56px;
  --style-button-height-mobile: 48px;
  --style-button-slim-height: 52px;
  --style-button-slim-height-mobile: 40px;
  --style-cta-underline-offset: 5px;
  --style-cta-underline-thickness: 1px;

  /* Colors - Primary Button */
  --color-primary-button-text: var(--color-foreground-on-dark);
  --color-primary-button-background: var(--color-cta);
  --color-primary-button-border: var(--color-cta);
  --color-primary-button-icon: var(--color-background-dark);
  --color-primary-button-icon-background: var(--color-foreground-on-dark);

  --color-primary-button-hover-text: var(--color-foreground-on-dark);
  --color-primary-button-hover-background: var(--color-brand-primary);
  --color-primary-button-hover-border: var(--color-brand-primary);
  --color-primary-button-hover-icon: var(--color-foreground-on-dark);
  --color-primary-button-hover-icon-background: var(--color-background-dark);

  /* Colors - Secondary Button */
  --color-secondary-button-text: var(--color-background-dark);
  --color-secondary-button-background: var(--color-foreground-on-dark);
  --color-secondary-button-border: var(--color-foreground-on-dark);
  --color-secondary-button-icon: var(--color-foreground-on-dark);
  --color-secondary-button-icon-background: var(--color-background-dark-secondary);

  --color-secondary-button-hover-text: var(--color-foreground-on-dark);
  --color-secondary-button-hover-background: var(--color-background-dark-secondary);
  --color-secondary-button-hover-border: var(--color-background-dark-secondary);
  --color-secondary-button-hover-icon: var(--color-background-dark);
  --color-secondary-button-hover-icon-background: var(--color-foreground-on-dark);

  /* Colors - Input */
  --color-input-background: rgba(255, 255, 255, 1);
  --color-input-text: var(--color-foreground-muted);
  --color-input-border: var(--color-foreground-muted-alpha-30);
  --color-input-hover-background: rgba(255, 255, 255, 1);
  --color-input-hover-text: var(--color-foreground-muted);
  --color-input-hover-border: var(--color-foreground-muted-alpha-30);

  /* Borders */
  --style-border-width-buttons-primary: 1px;
  --style-border-width-buttons-secondary: 1px;
  --style-border-radius-buttons-primary: 40px;
  --style-border-radius-buttons-secondary: 40px;

  --style-border-width-inputs: 1px;
  --style-border-radius-inputs: 8px;
  --style-border-width: 1px;

  /* Focus */
  --focus-outline-width: 1px;
  --focus-outline-offset: 3px;

  /* Pagination */
  --style-pagination-border-width: 1px;
  --pagination-item-foreground: var(--color-background-dark);
  --pagination-item-background: var(--color-background-light);
  --pagination-item-border: var(--color-background-light);
  --pagination-item-active-foreground: var(--color-foreground-on-dark);
  --pagination-item-active-background: var(--color-brand-primary);
  --pagination-item-active-border: var(--color-brand-primary);

  /* Swiper */
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: var(--color-foreground-on-dark);
  --swiper-navigation-background-color: transparent;
  --swiper-navigation-hover-color: var(--color-foreground-on-dark);
  --swiper-navigation-hover-background-color: rgba(234, 242, 250, 0.15);
  --swiper-pagination-bullet-inactive-color: var(--color-background-light);
  --swiper-pagination-color: var(--color-brand-primary);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

@media (max-width: 767px) {
  :root {
    --font-h1--size: 48px;
    --font-h2--size: 40px;
    --font-h3--size: 28px;
    --font-h4--size: 20px;
    --font-h5--size: 18px;
  }
}