/* ==========================================================================
   bplanning-app — design token
   Portato dal sito pubblico (bplanning/src/styles/tokens.css, base v19
   approvata dal fondatore) ed esteso per l'app: neutri, spaziature 8pt,
   scala tipografica, z-index, durate.
   UNICA fonte di verità dei colori: nessun colore hardcoded altrove.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand (identico al sito) --- */
  --navy: #123566;
  --navy-deep: #0b2547;
  --sky: #2057b0;
  --sky-deep: #164a96;
  --celeste-bg: #eaf3fb;
  --celeste-mid: #d9e9f8;
  /* Le due regole arancione del brand: --orange per display e fondi navy,
     --orange-text per testo piccolo su chiari e fondi con testo bianco. */
  --orange: #fa5105;
  --orange-gradient: linear-gradient(135deg, var(--orange) 0%, #ff7a1a 100%);
  --orange-text: #b83800;
  --orange-soft: #fde3d4;
  --yellow-report: #ffda47;
  --trustpilot: #00b67a;
  --contact-green: #25d366;
  --white: #ffffff;
  --ink: #14213d;
  --ink-soft: #57647a;
  --line: #d3e3f0;

  /* Testo su navy */
  --on-navy: #c7d5e4;
  --on-navy-dim: #9fb1c8;
  --on-navy-line: #24344c;

  /* --- Stati (nuovi per l'app) --- */
  --ok: #1c7a4a;          /* attivo, pagato, completato — testo su chiaro */
  --ok-bg: #e2f4ea;
  --warn: var(--orange-text);     /* da fare, in attesa */
  --warn-bg: var(--orange-soft);
  --danger: var(--orange-text);   /* errori, rifiutato, problema */
  --danger-bg: var(--orange-soft);
  --info: #164a96;
  --info-bg: #e0ecfa;

  /* --- Neutri a 10 step --- */
  --n0: #ffffff;
  --n1: #f7fafd;
  --n2: #eaf3fb;   /* = celeste-bg */
  --n3: #d3e3f0;   /* = line */
  --n4: #b9cee2;
  --n5: #8ba6c2;
  --n6: #57647a;   /* = ink-soft */
  --n7: #3d4a61;
  --n8: #1d2c47;
  --n9: #14213d;   /* = ink */
  --n10: #0b2547;  /* = navy-deep */

  /* --- Spaziature 8pt (e mezzi per componenti fitti) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* --- Tipografia --- */
  --serif: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;      /* 12 — label, badge */
  --fs-sm: 0.875rem;     /* 14 — testo secondario */
  --fs-md: 1rem;         /* 16 — corpo */
  --fs-lg: 1.125rem;     /* 18 — corpo grande */
  --fs-xl: clamp(1.25rem, 2vw, 1.5rem);   /* titoli sezione */
  --fs-2xl: clamp(1.5rem, 3vw, 2.125rem); /* pagine */
  --fs-display: clamp(1.9rem, 4vw, 2.8rem); /* hero */

  /* --- Forma --- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --pill: 100px;

  /* --- Ombre --- */
  --shadow-card: 0 20px 40px -24px rgba(14, 42, 74, 0.18);
  --shadow-panel: 0 30px 60px -30px rgba(14, 42, 74, 0.28);

  /* --- Layout app --- */
  --wrap: 1180px;
  --wrap-pad: 24px;
  --bottom-nav-h: 64px;   /* barra tab mobile + safe area */
  --header-h: 56px;
  --sidebar-w: 264px;

  /* --- Z-index --- */
  --z-header: 40;
  --z-drawer: 60;
  --z-overlay: 59;
  --z-bottom-nav: 45;
  --z-modal: 70;
  --z-toast: 80;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 0.8, 0.3, 1);
  --t-fast: 0.15s;
  --t-med: 0.25s;
}

@media (max-width: 640px) {
  :root {
    --wrap-pad: 16px;
  }
}