/* ============================================================
   SpesaChiara — Design Tokens
   Vanilla CSS variables for color, type, spacing, radius, shadow.
   Two themes (light / dark) wired via [data-theme] attribute.
   ============================================================ */

/* ---------- Type ---------- */
:root {
  /* Font stacks ------------------------------------------------ */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px → rem assumes 16px root) -------------------- */
  --fs-10:  0.625rem;   /* 10  · micro labels             */
  --fs-11:  0.6875rem;  /* 11  · eyebrow                  */
  --fs-12:  0.75rem;    /* 12  · caption                  */
  --fs-13:  0.8125rem;  /* 13  · UI small                 */
  --fs-14:  0.875rem;   /* 14  · UI base                  */
  --fs-15:  0.9375rem;  /* 15  · body                     */
  --fs-16:  1rem;       /* 16  · body large               */
  --fs-18:  1.125rem;   /* 18  · sub-title                */
  --fs-21:  1.3125rem;  /* 21  · card title               */
  --fs-24:  1.5rem;     /* 24  · h3                       */
  --fs-32:  2rem;       /* 32  · h2 (mobile)              */
  --fs-40:  2.5rem;     /* 40  · h2 (desktop)             */
  --fs-56:  3.5rem;     /* 56  · hero (desktop)           */

  /* Weights ---------------------------------------------------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Line-height & letter-spacing ------------------------------ */
  --lh-tight:  1.1;   /* @kind font */
  --lh-snug:   1.25;  /* @kind font */
  --lh-base:   1.5;   /* @kind font */
  --lh-loose:  1.65;  /* @kind font */

  --ls-tight:  -0.04em;  /* @kind font */
  --ls-snug:   -0.035em; /* @kind font */
  --ls-normal: -0.02em;  /* @kind font */
  --ls-wide:    0.07em;  /* @kind font */

  /* ---------- Colors — neutrals (zinc) ---------- */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* ---------- Colors — brand green (primary) ---------- */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;   /* primary */
  --green-600: #16a34a;   /* primary-dark / hover */
  --green-700: #15803d;
  --green-800: #166534;   /* logo plate */
  --green-900: #14532d;
  --green-950: #052e16;

  /* ---------- Semantic — convenience tiers ---------- */
  /* Green = conveniente, Yellow = nella media, Red = sopra media */
  --conv-good-bg:   #f0fdf4;
  --conv-good-fg:   #16a34a;
  --conv-good-line: #bbf7d0;
  --conv-good-dot:  #22c55e;

  --conv-mid-bg:    #fffbeb;
  --conv-mid-fg:    #92400e;
  --conv-mid-line:  #fde68a;
  --conv-mid-dot:   #f59e0b;

  --conv-bad-bg:    #fef2f2;
  --conv-bad-fg:    #991b1b;
  --conv-bad-line:  #fecaca;
  --conv-bad-dot:   #ef4444;

  /* ---------- Semantic — info / accent (used in map crowd flow) */
  --info-fg:   #67e8f9;
  --info-bg:   rgba(22, 78, 99, 0.4);
  --info-line: rgba(103, 232, 249, 0.25);

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;    /* card */
  --r-lg:  12px;   /* modal / panel */
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-pill: 9999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-0:  0;    /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.08);                       /* baseline (system) */
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.07), 0 20px 60px rgba(0,0,0,0.09);
  --shadow-soft:  0 2px 8px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.08);
  --shadow-pop:   0 8px 30px rgba(0,0,0,0.12);

  /* Brand-glow shadows ---------------------------------------- */
  --shadow-glow-green:  0 0 12px rgba(34,197,94,0.4);
  --shadow-cta-green:   0 4px 20px rgba(22,163,74,0.32);
  --shadow-focus-green: 0 0 0 3px rgba(34,197,94,0.15);
  --shadow-focus-red:   0 0 0 3px rgba(239,68,68,0.14);

  /* ---------- Transitions ---------- */
  --t-fast:    0.15s ease; /* @kind other */
  --t-base:    0.2s ease; /* @kind other */
  --t-slow:    0.36s cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  /* ---------- Backgrounds (page) ---------- */
  --bg-page:        #ffffff;
  --bg-page-tint:   #f0fdf4;   /* hero / sezioni green-tinted */
  --bg-page-soft:   #f8fffe;
  --bg-page-mute:   #fafafa;

  /* ---------- Semantic role tokens (LIGHT theme — default) ---------- */
  --fg-1:  var(--zinc-900);    /* primary text                   */
  --fg-2:  var(--zinc-600);    /* secondary text                 */
  --fg-3:  var(--zinc-500);    /* tertiary text                  */
  --fg-4:  var(--zinc-400);    /* muted                          */
  --fg-5:  var(--zinc-300);    /* faintest                       */

  --bg-1:  #ffffff;
  --bg-2:  var(--zinc-50);
  --bg-3:  var(--zinc-100);

  --border-1: var(--zinc-200); /* card border                    */
  --border-2: var(--zinc-100); /* hair-line / divider            */

  --primary:        var(--green-600);
  --primary-hover:  var(--green-700);
  --primary-fg:     #ffffff;
  --primary-tint:   var(--green-50);
  --primary-line:   var(--green-200);
}

/* ---------- Dark theme (Map / fullscreen surfaces) ---------- */
[data-theme="dark"] {
  --bg-page:      #0a0a0a;
  --bg-page-tint: #09090b;
  --bg-page-mute: #18181b;

  --fg-1: #fafafa;
  --fg-2: #e4e4e7;
  --fg-3: #a1a1aa;
  --fg-4: #71717a;
  --fg-5: #52525b;

  --bg-1: #1a1a1a;
  --bg-2: #18181b;
  --bg-3: #27272a;

  --border-1: #2a2a2a;
  --border-2: rgba(255,255,255,0.07);

  --primary:       var(--green-500);
  --primary-hover: var(--green-600);
  --primary-fg:    var(--green-950);
  --primary-tint:  rgba(34,197,94,0.12);
  --primary-line:  rgba(34,197,94,0.5);

  --shadow-card:  0 2px 10px rgba(0,0,0,0.35);
  --shadow-soft:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-pop:   0 8px 40px rgba(0,0,0,0.6);
}

/* =============================================================
   Semantic type styles — apply directly OR @extend equivalents
   ============================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-hero {
  font-size: clamp(var(--fs-32), 5vw, var(--fs-56));
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-h2 {
  font-size: clamp(var(--fs-24), 3.5vw, var(--fs-40));
  font-weight: var(--fw-extra);
  line-height: 1.15;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-h3 {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-card-title {
  font-size: var(--fs-21);
  font-weight: var(--fw-extra);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body  { font-size: var(--fs-15); font-weight: var(--fw-regular); color: var(--fg-2); line-height: var(--lh-base); }
.t-body-l{ font-size: var(--fs-18); font-weight: var(--fw-regular); color: var(--fg-2); line-height: var(--lh-loose); }
.t-sm    { font-size: var(--fs-13); color: var(--fg-3); }
.t-cap   { font-size: var(--fs-12); color: var(--fg-4); }

.t-eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-4);
}

.t-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-extra);
}

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-hover); }