/* ============================================================
   Citiculture — Design tokens + brand signatures
   Regola d'oro: il verde struttura, l'arancio accenta.
   Verde = radici, profondità, struttura. Arancio = energia,
   raccolto, l'accento umano — guida l'occhio, mai grandi superfici.
   Allineato all'export di Claude Design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* ---- Brand: Verde (primario / struttura) ---- */
  --green-petrol:        #0C3332;
  --green-deep:          #033030;
  --green-petrol-light:  #1C4A48;

  /* ---- Brand: Arancio (solo accento) ---- */
  --orange:              #EE7501;
  --orange-soft:         #E46C0A;

  /* ---- Brand: Oro/brass (accento secondario caldo) ---- */
  /* Riempie una o due card metrica in un set su verde petrolio
     (es. "Cosa realizzeremo insieme"). Resta accento: mai superfici estese. */
  --gold:                #A97B1E;
  --gold-soft:           #C1912B;
  --gold-deep:           #7E5B12;

  /* ---- Neutri & supporto ---- */
  --ink:                 #1F2A29;
  --sage-gray:           #637C7B;
  --on-dark-soft:        #CDD8D6;
  --white:               #FFFFFF;
  --off-white:           #F2F4F3;
  --green-mist:          #E3E8E6;   /* verde-off-white freddo dei fondi sezione del deck */
  --border:              #D5DEDC;

  /* ---- Alias semantici ---- */
  --color-bg:            var(--white);
  --color-bg-section:    var(--off-white);
  --color-bg-dark:       var(--green-petrol);
  --color-bg-darker:     var(--green-deep);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--off-white);
  --text-heading:        var(--green-petrol);
  --text-body:           var(--ink);
  --text-muted:          var(--sage-gray);
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  var(--on-dark-soft);
  --color-accent:        var(--orange);
  --color-accent-hover:  var(--orange-soft);
  --color-accent-warm:   var(--gold);        /* accento secondario — card metrica in evidenza */
  --color-link:          var(--orange);
  --text-on-gold:        var(--white);        /* testo su riempimenti oro */
  --color-bg-mist:       var(--green-mist);   /* fondo sezione pallido */
  --color-border:        var(--border);
  --color-border-dark:   var(--green-petrol-light);
  --color-focus-ring:    var(--orange);

  /* ---- Tipografia ---- */
  --font-display: 'Poppins', 'Montserrat', Arial, sans-serif;
  --font-body:    'Inter', 'Work Sans', Arial, sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive; /* parola-accento manoscritta + pull-quote */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fs-label:    12px;
  --fs-small:    13px;
  --fs-body:     16px;
  --fs-subtitle: 20px;
  --fs-h3:       22px;
  --fs-h2:       32px;
  --fs-h1:       48px;
  --fs-hero:     64px;
  --fs-script:   40px;   /* parola-accento manoscritta dentro un titolo */
  --fs-quote:    36px;   /* pull-quote in Caveat */
  --lh-tight:    1.1;
  --lh-heading:  1.2;
  --lh-snug:     1.35;
  --lh-body:     1.6;
  --ls-label:    0.12em;
  --ls-tight:    -0.01em;

  /* ---- Token tipografici semantici ---- */
  --type-label-size:    var(--fs-label);
  --type-label-weight:  var(--fw-semibold);
  --type-h1-weight:     var(--fw-bold);
  --type-h2-weight:     var(--fw-bold);
  --type-h3-weight:     var(--fw-semibold);
  --type-body-weight:   var(--fw-regular);
  --type-script-family: var(--font-script);
  --type-script-weight: 600;
  --type-quote-family:  var(--font-script);
  --type-quote-weight:  500;

  /* ---- Spaziature ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --container-max: 1200px;
  --gutter:        var(--space-lg);

  /* ---- Raggi ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* ---- Ombre (verdi, morbide) ---- */
  --shadow-card:   0 4px 16px rgba(12, 51, 50, 0.08);
  --shadow-raised: 0 8px 32px rgba(12, 51, 50, 0.12);
  --focus-ring:    0 0 0 3px rgba(238, 117, 1, 0.35);

  /* ---- Marchio a fiore Citiculture (6 petali + cuore), come mask ricolorabile ----
     Usato come motivo decorativo (.cc-star) e come bullet a fiore (.cc-bullets). */
  --cc-star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='26' rx='10' ry='22'/%3E%3Cellipse cx='50' cy='26' rx='10' ry='22' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='26' rx='10' ry='22' transform='rotate(120 50 50)'/%3E%3Cellipse cx='50' cy='26' rx='10' ry='22' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='26' rx='10' ry='22' transform='rotate(240 50 50)'/%3E%3Cellipse cx='50' cy='26' rx='10' ry='22' transform='rotate(300 50 50)'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   Base elementi
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ============================================================
   Firme di brand
   ============================================================ */

/* Punto arancio del titolo: <h1 class="cc-dot">Titolo</h1> */
.cc-dot::after { content: "."; color: var(--color-accent); }

/* Label di sezione (uppercase, tracked, arancio) */
.cc-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.cc-label.on-dark { color: var(--orange); }

/* Keyword arancio dentro il corpo testo */
.cc-key { color: var(--color-accent); font-weight: var(--fw-bold); }

/* Sottotitolo / enfasi in corsivo */
.cc-subtitle {
  font-size: var(--fs-subtitle);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

/* Accento manoscritto: UNA parola arancio in Caveat dentro un titolo bold.
   <h1>Le cose che <span class="cc-script">contano</span></h1> */
.cc-script {
  font-family: var(--font-script);
  font-weight: var(--type-script-weight);
  font-style: normal;
  color: var(--color-accent);
  font-size: 1.25em;   /* otticamente più grande del display circostante */
  line-height: 0.9;
}

/* Pull-quote in Caveat — per le voci umane (paziente/partner) in prima persona. */
.cc-quote {
  font-family: var(--font-script);
  font-weight: var(--type-quote-weight);
  font-size: var(--fs-quote);
  line-height: 1.15;
  color: var(--text-heading);
}
.cc-map-pattern .cc-quote,
.section--dark .cc-quote,
.cc-on-dark .cc-quote { color: var(--white); }

/* Helper: forza colori "su scuro" a un blocco fuori da .section--dark */
.cc-on-dark, .cc-on-dark h1, .cc-on-dark h2, .cc-on-dark h3 { color: var(--white); }

/* Marchio a fiore/asterisco: motivo decorativo che respira nel whitespace
   (hero, CTA) o punteggia una metrica. Si ricolora con `color`. */
.cc-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  color: var(--color-accent);
  -webkit-mask: var(--cc-star-svg) center / contain no-repeat;
  mask: var(--cc-star-svg) center / contain no-repeat;
  vertical-align: middle;
  flex: none;
}

/* Lista puntata col marchio a fiore — ogni voce guidata da un piccolo fiore arancio. */
.cc-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cc-bullets li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.cc-bullets li::before {
  content: "";
  flex: none;
  width: 0.85em;
  height: 0.85em;
  transform: translateY(0.12em);
  background-color: var(--color-accent);
  -webkit-mask: var(--cc-star-svg) center / contain no-repeat;
  mask: var(--cc-star-svg) center / contain no-repeat;
}

/* Accento secondario: card metrica oro — evidenzia una/due card in un set (mai tutto). */
.cc-metric-gold {
  background: var(--gold);
  color: var(--text-on-gold);
  border-radius: var(--radius-lg);
}
.cc-metric-gold :where(.cc-label, h1, h2, h3, strong) { color: var(--text-on-gold); }

/* Pattern "mappa urbana" per superfici verdi */
.cc-map-pattern {
  background-color: var(--green-petrol);
  background-image:
    linear-gradient(var(--green-petrol-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--green-petrol-light) 1px, transparent 1px),
    linear-gradient(var(--green-petrol-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--green-petrol-light) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  position: relative;
}
.cc-map-pattern > * { position: relative; z-index: 1; }

/* Maschere foto */
.cc-photo-rect   { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.cc-photo-circle { border-radius: var(--radius-full); overflow: hidden; aspect-ratio: 1 / 1; }