/* @font-face per l'embed iframe (documento separato, non eredita i font del sito). I .ttf sono in /public/fonts/. */
@font-face { font-family: 'Syne'; src: url('/fonts/Syne_wght_.ttf') format('truetype-variations'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans_opsz_wght_.ttf') format('truetype-variations'); font-weight: 100 1000; font-style: normal; font-display: swap; }

/* ═══════════════════════════════════════════════════════════════════════
   BRUNO — Design Tokens & Type System
   Capocantiere digitale per PMI edili italiane.
   Voce: "Lui pensa. Tu decidi."
   
   Source-of-truth: bruno/app/src/App.tsx (ACCENT=#F97316, A2=#EA580C)
                    bruno/sito/tailwind.config.mjs
                    bruno/app/src/lib/dashboardUI.tsx
   ═══════════════════════════════════════════════════════════════════════ */

/* NB (handoff): i @font-face per Syne / DM Sans sono nel global.css del repo Astro
   (vedi README_DEPLOY.md → sezione font). I .ttf sono in fonts/. Qui non li
   ridichiariamo per non duplicare le sorgenti del design system. */

:root {
  /* ── BRAND ──────────────────────────────────────────────────────────
     Arancione segnaletica. Solo per CTA, brand moments, accent.
     Se usato ovunque smette di segnalare. */
  --brand:           #F97316;  /* Bruno Orange — primary */
  --brand-hover:     #EA580C;  /* hover / pressed */
  --brand-pressed:   #C2410C;
  --brand-tint:      #FFF7ED;  /* tint sfondi highlight */
  --brand-tint-2:    #FFEDD5;
  --brand-50:        #FFF7ED;
  --brand-100:       #FFEDD5;
  --brand-200:       #FED7AA;
  --brand-300:       #FDBA74;
  --brand-400:       #FB923C;
  --brand-500:       #F97316;
  --brand-600:       #EA580C;
  --brand-700:       #C2410C;
  --brand-800:       #9A3412;
  --brand-900:       #7C2D12;

  /* ── TEXT (foreground) ──────────────────────────────────────────── */
  --fg-1:            #0F172A;  /* Slate-900 — heading più forti */
  --fg-2:            #1E293B;  /* Slate Deep — body principale, titoli */
  --fg-3:            #334155;  /* body secondario */
  --fg-4:            #64748B;  /* label / placeholder */
  --fg-5:            #94A3B8;  /* hint / disabilitato */
  --fg-inverse:      #FFFFFF;

  /* ── SURFACES ───────────────────────────────────────────────────── */
  --bg-page:         #F8FAFC;  /* background pagina */
  --bg-card:         #FFFFFF;  /* card / modal */
  --bg-muted:        #F1F5F9;  /* divider / hover row */
  --bg-subtle:       #F9FAFB;  /* inner panels (squadra, mezzi) */
  --bg-dark:         #1E293B;  /* hero/navbar premium */
  --bg-dark-2:       #0F172A;
  
  --border:          #E2E8F0;  /* bordi card */
  --border-muted:    #F1F5F9;
  --border-strong:   #CBD5E1;

  /* ── STATUS ─────────────────────────────────────────────────────── */
  --ok:              #10B981;
  --ok-tint:         #ECFDF5;
  --ok-border:       #A7F3D0;
  --warn:            #F59E0B;
  --warn-tint:       #FFFBEB;
  --warn-border:     #FDE68A;
  --critical:        #EF4444;
  --critical-tint:   #FEF2F2;
  --critical-border: #FECACA;
  --info:            #0891B2;
  --info-tint:       #ECFEFF;
  --info-border:     #A5F3FC;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
  --font-display:    'Syne', system-ui, sans-serif;     /* 700/800 */
  --font-body:       'DM Sans', system-ui, sans-serif;  /* 400/500/600/700 */

  /* Type scale (mobile-first) */
  --fs-display:      48px;  /* 40–64 — Syne 800 */
  --fs-h1:           32px;  /* 28–36 — Syne 700 */
  --fs-h2:           22px;  /* 20–24 — Syne/DM Sans 700 */
  --fs-h3:           18px;  /* DM Sans 700 */
  --fs-body:         15px;  /* 13–16 — DM Sans 400/500 */
  --fs-body-sm:      13px;
  --fs-label:        11.5px; /* 11–12 */
  --fs-caption:      10px;   /* 9–11 */

  --lh-tight:        1.05;  /* @kind other */
  --lh-snug:         1.2;   /* @kind other */
  --lh-normal:       1.5;   /* @kind other */
  --lh-relaxed:      1.6;   /* @kind other */

  /* ── SHAPE ──────────────────────────────────────────────────────── */
  --r-xs:            6px;
  --r-sm:            8px;    /* button, chip */
  --r-md:            10px;
  --r-lg:            14px;   /* card cantiere */
  --r-xl:            16px;   /* card sezione bacheca */
  --r-2xl:           18px;   /* hero card */
  --r-3xl:           24px;
  --r-pill:          999px;

  /* ── ELEVATION ──────────────────────────────────────────────────── */
  --shadow-card:     0 1px 3px rgba(15,23,42,0.04);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-modal:    0 4px 24px rgba(0,0,0,0.12);
  --shadow-hero:     0 4px 16px rgba(249,115,22,0.25);  /* arancione, solo hero gradient */
  --shadow-button:   0 1px 2px rgba(15,23,42,0.06);

  /* ── SPACING (4px grid) ─────────────────────────────────────────── */
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;   /* card gap default */
  --s-5:             20px;
  --s-6:             24px;   /* card padding standard */
  --s-8:             32px;
  --s-10:            40px;
  --s-12:            48px;
  --s-16:            64px;
  --s-20:            80px;
  --s-24:            96px;

  /* ── TOUCH ──────────────────────────────────────────────────────── */
  --tap-min:         44px;   /* hit target minimo (mano sporca, guanto) */
  --tap-comfortable: 48px;

  /* ── GRADIENTS ──────────────────────────────────────────────────── */
  --grad-hero:       linear-gradient(135deg, #F97316 0%, #EA580C 100%);  /* @kind color */
  --grad-hero-soft:  linear-gradient(180deg, #FFF7ED 0%, #F8FAFC 60%);  /* @kind color */
}

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT DEFAULTS
   ═══════════════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-2);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-family: var(--font-body); font-weight: 700; }

.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.01em; color: var(--fg-1); }

p { margin: 0; color: var(--fg-3); line-height: var(--lh-relaxed); }

.label    { font-size: var(--fs-label); font-weight: 600; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.5px; }
.caption  { font-size: var(--fs-caption); color: var(--fg-4); }
.body-sm  { font-size: var(--fs-body-sm); }

/* Numero gigante stile Bacheca / hero KPI — DM Sans (i numeri Syne sono troppo decorativi) */
.numeric-hero { font-family: var(--font-body); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.numeric-lg   { font-family: var(--font-body); font-weight: 700; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }

code, .mono {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace;
}