/* ============================================================
   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&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;

  /* ---- Neutri & supporto ---- */
  --ink:                 #1F2A29;
  --sage-gray:           #637C7B;
  --on-dark-soft:        #CDD8D6;
  --white:               #FFFFFF;
  --off-white:           #F2F4F3;
  --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-link:          var(--orange);
  --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;
  --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;
  --lh-tight:    1.1;
  --lh-heading:  1.2;
  --lh-snug:     1.35;
  --lh-body:     1.6;
  --ls-label:    0.12em;
  --ls-tight:    -0.01em;

  /* ---- 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);
}

/* ============================================================
   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);
}

/* 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; }