/* ===== Design Tokens ===== */
:root {
  --ccy-bg-dark: linear-gradient(90deg, #052C55, #021124);
  --ccy-bg-dark_cards: linear-gradient(90deg, #052c55d2, #021124d2);
  --ccy-bg-light_cards: rgba(255, 255, 255, 1);
  --ccy-bg-light: #ffffff;

  --ccy-primary: #00d4ff;
  --ccy-dark: #211e3b;
  --ccy-accent: #db1952;
  --ccy-kicker: #ff695f;
  --ccy-hero-bg: #dde0e6;
  --ccy-line-divider: linear-gradient(90deg, #0056b3, #00d4ff); 
  --border: rgba(0, 0, 0, 0.06);


  --font_family: 'Smooch Sans', sans-serif;

  /* Title */
  --font_size_title: clamp(2.1rem, 5vw, 3rem);
  --font_size_title_first_letter: clamp(3rem, 4vw, 4rem);
  --font_style:normal;
  --font_size_subtitle: 58px;
  --font_weight_title: 700;
  --line_height_title: 1.2;
  --margin_bottom_title: 12px;

  /*Subtitle*/
  --font_size_subtitle: 20px;


  /* Card Title */
  --font_size_card_title: clamp(18px, 2.5vw, 28px);

  /* Card Text */
  --font_size_card_text: 18px;

  /*Botton*/
  --font_size_botton: 13px;


  /*Kicker*/
  --font_size_kicker: 17px;
  --font_weight_kicker: 800; 
}


/*Sfondo*/
html,
body {
  font-optical-sizing: 100 !important;
  --bs-secondary-bg-rgb: 255, 255, 255;
  /* sovrascrive la variabile, no !important */
}



/*Titoli sezione neri e bianchi in base allo sfondo in cui ci troviamo*/
.title_section_dark {
  font-size: var(--font_size_title);
  font-weight: var(--font_weight_title);
  line-height: var(--line_height_title);
  margin-bottom: var(--margin_bottom_title);
  color: var(--ccy-hero-bg);
  position: relative;
  z-index: 1;
}

.title_section_dark::first-letter {
  font-size: var(--font_size_title_first_letter);
  color: var(--ccy-accent);
}

.title_section_white {
  font-size: var(--font_size_title);
  font-weight: var(--font_weight_title);
  line-height: var(--line_height_title);
  margin-bottom: var(--margin_bottom_title);
  color: var(--ccy-dark);
  position: relative;
  z-index: 1;
}

.title_section_white::first-letter {
  font-size: var(--font_size_title_first_letter);
  color: var(--ccy-accent);
}



/*Sottotitoli sezione neri e bianchi in base allo sfondo in cui ci troviamo*/
.subtitle_section_white {
  color: var(--ccy-dark);
  font-size: var(--font_size_subtitle);
  position: relative;
  z-index: 1;
}

.subtitle_section_dark {
  color: var(--ccy-primary);
  font-size: var(--font_size_subtitle);
  position: relative;
  z-index: 1;
}