:root{
  /* =========================================================
     BRAND CORE
     ========================================================= */
  --brand-yellow: #ffe210;
  --brand-blue:   #3f60c1;
  --brand-white:  #ffffff;
  --brand-black:  #000000;

  /* Spot palette (richiamo creativo) */
  --spot-teal: #157a7a;
  --spot-navy: #103a56;
  --spot-blue: #3e60c1;

  /* Forze Armate accents (usare poco) */
  --mil-orange: #fca311;
  --mil-navy:   #14213d;
  --mil-green:  #078845;

  /* =========================================================
     THEME TOKENS (usali ovunque)
     ========================================================= */
  --tc-bg: var(--brand-white);
  --tc-text: #0f2230;
  --tc-muted: #5b6b7a;

  --tc-primary: var(--spot-navy);         /* struttura */
  --tc-secondary: var(--spot-teal);       /* accenti */
  --tc-link: var(--brand-blue);           /* link coerente con brand */
  --tc-accent: var(--brand-yellow);       /* CTA */
  --tc-yellow: var(--brand-yellow);

  --tc-border-color: rgba(16,58,86,0.10);
  --tc-shadow-card: 0 14px 34px rgba(16,58,86,0.07);
  --tc-shadow-soft: 0 10px 26px rgba(16,58,86,0.06);

  /* =========================================================
     LIGHT BACKGROUNDS (puliti, poco colorati)
     ========================================================= */
  --tc-body-bg:
    radial-gradient(circle at 12% 10%, rgba(16,58,86,0.05) 0%, rgba(16,58,86,0) 55%),
    radial-gradient(circle at 88% 16%, rgba(63,96,193,0.05) 0%, rgba(63,96,193,0) 60%),
    radial-gradient(circle at 50% 92%, rgba(255,226,16,0.05) 0%, rgba(255,226,16,0) 55%),
    var(--tc-bg);

  --tc-section-bg-default: #ffffff;
  --tc-section-bg-soft: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  --tc-section-bg-cool: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
  --tc-section-bg-warm: linear-gradient(180deg, #ffffff 0%, #fbfaf2 100%);

  /* =========================================================
     TOPBAR/HEADER: uguale alla sticky
     ========================================================= */

  --tc-topbar-bg: var(--tc-sticky-bg);
  --tc-topbar-border: 1px solid rgba(255,255,255,0.14);
  --tc-topbar-claim-color: rgba(255,255,255,0.90);

  /* =========================================================
     HERO: più pulito (NO giallo nello sfondo)
     ========================================================= */

  /* Hero background: navy -> teal -> navy (minimal, leggibile) */
  --tc-hero-bg:
    radial-gradient(circle at 20% 30%, rgba(21,122,122,0.22) 0%, rgba(21,122,122,0) 55%),
    radial-gradient(circle at 82% 20%, rgba(63,96,193,0.18) 0%, rgba(63,96,193,0) 58%),
    linear-gradient(135deg, rgba(16,58,86,0.98) 0%, rgba(21,122,122,0.88) 55%, rgba(16,58,86,0.96) 100%);

  /* Overlay un filo più scuro per far “staccare” il bianco */
  --tc-hero-overlay-bg:
    radial-gradient(circle at 40% 40%, rgba(0,0,0,0.18), rgba(0,0,0,0.38));

  --tc-hero-text: #ffffff;
  --tc-hero-muted: rgba(255,255,255,0.82);

  /* Badge: resta giallo (accent), ma leggermente più sobrio */
  --tc-badge-bg: rgba(255,226,16,0.14);
  --tc-badge-border: rgba(255,226,16,0.40);
  --tc-badge-color: var(--tc-accent);

  /* Chips: uguale logica */
  --tc-chip-bg: rgba(255,226,16,0.10);
  --tc-chip-border: 1px solid rgba(255,226,16,0.36);
  --tc-chip-text: rgba(255,255,255,0.92);

  /* =========================================================
     BUTTONS
     ========================================================= */
  --tc-btn-yellow-bg: var(--tc-accent);
  --tc-btn-yellow-border: var(--tc-accent);
  --tc-btn-yellow-text: #0b0b0b;
  --tc-btn-yellow-hover-bg: #ffd600;
  --tc-btn-yellow-hover-border: #ffd600;

  /* secondario hero: blu brand */
  --tc-btn-secondary-bg: rgba(63,96,193,0.92);
  --tc-btn-secondary-border: rgba(255,255,255,0.18);
  --tc-btn-secondary-text: #ffffff;

  --tc-btn-secondary-hover-brightness: 1.08;

  /* outline (se lo tieni nella cast) */
  --tc-btn-outline-border: rgba(255,255,255,0.70);
  --tc-btn-outline-text: rgba(255,255,255,0.96);
  --tc-btn-outline-hover-border: rgba(255,226,16,0.70);
  --tc-btn-outline-hover-text: rgba(255,226,16,0.95);

  /* =========================================================
     CARDS / PLANS
     ========================================================= */
  --tc-card-bg: #ffffff;
  --tc-card-border: var(--tc-border-color);
  --tc-card-radius: 16px;

  --tc-card-dark-bg:
    linear-gradient(180deg, rgba(16,58,86,0.92), rgba(11,11,11,0.88));
  --tc-card-dark-border: 1px solid rgba(255,255,255,0.14);

  --tc-plan-bg: rgba(255,255,255,0.06);
  --tc-plan-border: 1px solid rgba(255,255,255,0.16);

  --tc-plan-recommended-border: 2px solid rgba(255,226,16,0.70);
  --tc-plan-recommended-bg:
    linear-gradient(180deg, rgba(255,226,16,0.10), rgba(21,122,122,0.06));

  /* =========================================================
     CAST SECTION: richiamo spot (teal/navy/blue)
     ========================================================= */
  --cast-tint-bg:
    linear-gradient(90deg, rgba(16,58,86,0.18), rgba(21,122,122,0.16), rgba(62,96,193,0.10));
  --cast-tint-opacity: 0.85;

  --cast-box-bg: rgba(8,10,12,0.46);
  --cast-box-border: 1px solid rgba(255,255,255,0.18);

  /* sizing (come già usi) */
  --cast-min-height-desktop: 620px;
  --cast-min-height-desktop-lg: 720px;
  --cast-strip-min-height-mobile: 310px;

  --cast-overlay-left: 0.55;
  --cast-overlay-mid: 0.22;
  --cast-overlay-right: 0.35;
  --cast-overlay-top: 0.25;
  --cast-overlay-bottom: 0.35;

  /* =========================================================
     STICKY BAR: più scura (testo bianco leggibile)
     ========================================================= */

  --tc-sticky-bg:
    linear-gradient(90deg, rgba(12,40,60,0.98), rgba(16,58,86,0.98), rgba(12,40,60,0.98));

  --tc-sticky-border: 1px solid rgba(255,255,255,0.16);
  --tc-sticky-title: #ffffff;
  --tc-sticky-sub: rgba(255,255,255,0.86);

  /* =========================================================
     "FORZE ARMATE" SECTION (solo se la fai)
     ========================================================= */
  --mil-section-bg:
    radial-gradient(circle at 18% 20%, rgba(252,163,17,0.14) 0%, rgba(252,163,17,0) 55%),
    radial-gradient(circle at 80% 25%, rgba(7,136,69,0.12) 0%, rgba(7,136,69,0) 55%),
    linear-gradient(180deg, rgba(20,33,61,0.08), #ffffff 85%);
  --mil-accent: var(--mil-orange);
  --mil-title: rgba(20,33,61,0.92);
}