/* Design tokens — Coop / Ipercoop visual identity */

:root {
  /* Colors — Brand */
  --coop-red: #e30613;
  --coop-red-dark: #a40410;
  --ipercoop-red: #e30613;

  /* Colors — UI */
  --ink-1: #1a1a1a;
  --ink-2: #222222;
  --ink-3: #555555;
  --ink-4: #888888;
  --ink-5: #aaaaaa;

  --bg-app: #f0efed;
  --bg-soft: #f7f6f4;
  --bg-canvas: #d8d6d2;
  --bg-card: #ffffff;
  --bg-dark: #1a1a1a;
  --bg-dark-2: #2a2a2a;

  --border-soft: #e5e3df;
  --border-mid: #e0e0dc;

  /* Status */
  --ok: #0fb87a;
  --warn: #f0a500;
  --err: #e30613;
  --ai: #b26b00;
  --ai-2: #d68f10;
  --ai-bg: #fff7e6;
  --ai-border: #f0d090;

  /* Tag categoria — tinte tenui (pill inspector / legenda) */
  --tag-soci: #cfe4f0;
  --tag-infanzia: #f3c9e8;
  --tag-cani-gatti: #c9eccb;

  /* Tag categoria — varianti sature (indicatore a colpo d'occhio sulle card) */
  --tag-soci-strong: #1f7fb8;
  --tag-infanzia-strong: #c0468f;
  --tag-cani-gatti-strong: #2f9d4e;

  /* Typography */
  --font-sans: -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Helvetica Neue", "Arial Black", system-ui, sans-serif;

  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-base: 13px;
  --fs-lg: 14px;
  --fs-xl: 16px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-display: 36px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;

  /* Radius — stondature più marcate (richiesta UX) */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadow — scala di elevazione (warm near-black, morbida) */
  --shadow-sm: 0 1px 2px rgba(26,22,18,0.06);
  --shadow-md: 0 2px 6px rgba(26,22,18,0.08), 0 1px 2px rgba(26,22,18,0.05);
  --shadow-page: 0 4px 14px rgba(26,22,18,0.13);
  --shadow-lg: 0 6px 20px rgba(26,22,18,0.14);
  --shadow-panel: 0 12px 32px rgba(26,22,18,0.24), 0 2px 8px rgba(26,22,18,0.16);  /* card flottanti laterali (più marcata) */
  --shadow-modal: 0 14px 44px rgba(0,0,0,0.24);
  --shadow-topbar: 0 2px 10px rgba(0,0,0,0.18);

  /* Tinte tenui (stati / accenti soft) */
  --coop-red-tint: #fdecea;

  /* Pannello scuro flottante (stile Stripo) — riusabile anche dal pannello sinistro */
  --panel-bg: #1e1e1f;
  --panel-card: #2a2a2c;
  --panel-field: #333335;
  --panel-border: rgba(255,255,255,0.10);
  --panel-ink: #f1f0ee;
  --panel-muted: #9a9a9a;
  --editor-bg: #ecebe8;
  --rp-w: 340px;              /* larghezza pannello (default; override inline a runtime) */
  --rp-w-min: 280px;
  --rp-w-max: 480px;
  --lp-w: 240px;              /* larghezza pannello sinistro (default; override inline a runtime) */
  --lp-w-min: 220px;
  --lp-w-max: 340px;

  /* Layers */
  --z-topbar: 20;
  --z-modal: 100;
}