/*
 * variables.css — Boost4Biz
 * Design tokens: palette brand Green/Orange/Navy, tipografia, spaziature, layout
 * ─────────────────────────────────────────────────────────────
 * EDITABILE: modifica qui per cambiare l'aspetto globale del tema
 *
 * STRATEGIA COLORI:
 *   --color-electric  → Verde brand #0F8060  (CTA primaria)
 *   --color-cyan      → Arancione #F39422    (accento/highlight)
 *   --color-primary   → Navy #1D3D6B         (titoli / sfondi scuri)
 *   --color-bg        → #F7FAF8              (sfondo principale)
 */

:root {

  /* ══ PALETTE BRAND ══════════════════════════════════════════════════ */

  /* Verde — CTA primaria (alias: color-electric per retro-compat. componenti) */
  --color-electric:        #0F8060;
  --color-electric-hover:  #0C6A50;
  --color-electric-light:  #EEF4F1;
  --color-electric-dim:    rgba(15, 128, 96, .08);
  --color-electric-glow:   rgba(15, 128, 96, .16);

  /* Arancione — accento/highlight (alias: color-cyan) */
  --color-cyan:            #F39422;
  --color-cyan-hover:      #D97E16;
  --color-cyan-soft:       rgba(243, 148, 34, .10);

  /* Navy — struttura, titoli, sfondi scuri */
  --color-primary:         #1D3D6B;

  /* Sfondi */
  --color-bg:              #F7FAF8;
  --color-bg-section:      #EEF4F1;
  --color-bg-alt:          #E2EDE9;
  --color-bg-dark:         #1D3D6B;
  --color-bg-dark-alt:     #162E52;
  --color-bg-code:         #162E52;

  /* Testo */
  --color-text:            #163128;
  --color-text-muted:      #4F665D;
  --color-text-subtle:     #8AA098;
  --color-text-on-dark:    #EEF4F1;
  --color-text-muted-on-dark: #9BB5CA;

  /* Bordi */
  --color-border:          #D8E3DE;
  --color-border-strong:   #B8CFCA;
  --color-border-dark:     #2A4E7A;
  --color-white:           #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-soft:    #EEF4F1;

  /* Status */
  --color-success:         #10B981;
  --color-success-bg:      #ECFDF5;
  --color-error:           #EF4444;
  --color-error-bg:        #FEF2F2;

  /* ══ TIPOGRAFIA ═════════════════════════════════════════════════════ */

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* Scala tipografica */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  /* Pesi */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Interlinea */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.625;
  --leading-relaxed: 1.75;

  /* Spaziatura lettere */
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-widest:  0.10em;

  /* ══ SPAZIATURE ════════════════════════════════════════════════════= */

  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* ══ LAYOUT ════════════════════════════════════════════════════════= */

  --container-max:    1280px;
  --container-narrow: 720px;
  --header-height:    64px;
  --sidebar-width:    280px;

  /* ══ BORDI / RAGGI ═════════════════════════════════════════════════= */

  --radius-sm:   3px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ══ OMBRE ══════════════════════════════════════════════════════════ */

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .04);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-base: 0 4px 6px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .03);
  --shadow-md:   0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);
  --shadow-lg:   0 20px 25px rgba(0, 0, 0, .08), 0 10px 10px rgba(0, 0, 0, .03);
  --shadow-glow: 0 0 0 3px var(--color-electric-dim), 0 4px 16px var(--color-electric-glow);

  /* ══ TRANSIZIONI ════════════════════════════════════════════════════ */

  --ease-fast:   120ms ease;
  --ease-base:   220ms ease;
  --ease-slow:   380ms ease;
  --ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}