/* ============================================================
   QuiQuoQua · Design tokens
   Layer di refactoring mobile-first — riferimento: quiquoqua_refactor_design.pdf
   ============================================================ */

:root {
  /* --- Colori primari --- */
  --qq-cream:        #FBF9F5;
  --qq-ink:          #1A1A1A;
  --qq-canary:       #FFDD5C;
  --qq-muted:        #8A857B;

  /* --- Colori di supporto --- */
  --qq-cream-warm:   #F5EFE4;
  --qq-sand:         #E8E1D4;
  --qq-sage:         #B8C3A3;
  --qq-blush:        #F0D9CE;

  /* --- Colori funzionali --- */
  --qq-canary-soft:  #FFEFB0;
  --qq-danger:       #C24A3A;
  --qq-line:         #E4DFD5;
  --qq-ink-soft:     #3A3A3A;
  --qq-white:        #FFFFFF;

  /* --- Tipografia --- */
  --qq-font-serif:   'Fraunces', Georgia, serif;
  --qq-font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --qq-fs-hero:      clamp(2rem, 8vw, 2.75rem);   /* 32-44px */
  --qq-fs-h1:        clamp(1.75rem, 6vw, 2.25rem); /* 28-36px */
  --qq-fs-h2:        clamp(1.375rem, 4.5vw, 1.75rem); /* 22-28px */
  --qq-fs-h3:        1.25rem;   /* 20px */
  --qq-fs-body:      0.9375rem; /* 15px — leggibile su mobile senza zoom */
  --qq-fs-small:     0.8125rem; /* 13px */
  --qq-fs-micro:     0.6875rem; /* 11px */
  --qq-fs-kicker:    0.75rem;   /* 12px */

  --qq-lh-tight:     1.05;
  --qq-lh-heading:   1.15;
  --qq-lh-body:      1.55;

  --qq-ls-tight:     -0.01em;
  --qq-ls-kicker:    0.16em;
  --qq-ls-btn:       0.08em;
  --qq-ls-brand:     0.2em;

  --qq-fw-regular:   400;
  --qq-fw-medium:    500;
  --qq-fw-semi:      600;
  --qq-fw-bold:      700;
  --qq-fw-black:     800;

  /* --- Spaziature (base 4px) --- */
  --qq-space-1:      4px;
  --qq-space-2:      8px;
  --qq-space-3:      12px;
  --qq-space-4:      16px;
  --qq-space-5:      20px;
  --qq-space-6:      24px;
  --qq-space-7:      32px;
  --qq-space-8:      40px;
  --qq-space-9:      56px;
  --qq-space-10:     72px;

  /* --- Radii --- */
  --qq-radius-none:  0;
  --qq-radius-xs:    2px;   /* bottoni, badge */
  --qq-radius-sm:    4px;
  --qq-radius-md:    8px;
  --qq-radius-lg:    12px;
  --qq-radius-pill:  999px;

  /* --- Ombre --- */
  --qq-shadow-sm:    0 1px 2px rgba(26,26,26,0.04);
  --qq-shadow-md:    0 4px 12px rgba(26,26,26,0.06);
  --qq-shadow-lg:    0 8px 24px rgba(26,26,26,0.10);

  /* --- Transizioni --- */
  --qq-ease:         cubic-bezier(0.2, 0.7, 0.3, 1);
  --qq-t-fast:       120ms var(--qq-ease);
  --qq-t-base:       200ms var(--qq-ease);
  --qq-t-slow:       320ms var(--qq-ease);

  /* --- Layout mobile-first --- */
  --qq-container:    100%;
  --qq-container-x:  16px;
  --qq-header-h:     56px;
  --qq-sticky-cta-h: 64px;
  --qq-z-header:     100;
  --qq-z-sticky:     90;
  --qq-z-overlay:    200;
  --qq-z-sheet:      210;
}

@media (min-width: 768px) {
  :root {
    --qq-container-x: 32px;
    --qq-header-h:    72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --qq-container:   1200px;
    --qq-container-x: 48px;
  }
}