/* ═══════════════════════════════════════════
   OpsPilot — Design Tokens
   Modifica qui per cambiare l'intera palette
   ═══════════════════════════════════════════ */

:root {
  /* ─── Palette base ─── */
  --bg: #fafaf9;               /* warm off-white (Notion-like) */
  --card: #ffffff;
  --card2: #f5f3ff;            /* violet tint */
  --card3: #fef3f2;            /* peach tint per variety */
  --text: #0f172a;             /* slate-900 — contrasto max */
  --muted: #475569;            /* slate-600 — 7:1 su bg (WCAG AAA) */
  --muted-strong: #334155;     /* slate-700 per testi secondari critici */
  --line: rgba(15, 23, 42, 0.10);
  --line-strong: rgba(15, 23, 42, 0.16);

  /* ─── Colori azione (palette vibrant, Framer/Notion) ─── */
  --accent: #6366f1;           /* indigo-500 */
  --accent-strong: #4f46e5;    /* indigo-600 per hover */
  --accent2: #ec4899;          /* pink-500 */
  --accent3: #8b5cf6;          /* violet-500 */
  --accent4: #06b6d4;          /* cyan-500 */
  --good: #059669;             /* emerald-600 */
  --bad: #dc2626;              /* red-600 */
  --warn: #d97706;             /* amber-600 */

  /* ─── Canali RGB (per rgba() con opacità libera) ─── */
  --accent-rgb: 99, 102, 241;
  --accent2-rgb: 236, 72, 153;
  --accent3-rgb: 139, 92, 246;
  --accent4-rgb: 6, 182, 212;
  --good-rgb: 5, 150, 105;
  --bad-rgb: 220, 38, 38;
  --warn-rgb: 217, 119, 6;
  --text-rgb: 15, 23, 42;
  --bg-rgb: 250, 250, 249;

  /* ─── Varianti con opacità ─── */
  --accent-10: rgba(99, 102, 241, .10);
  --accent-20: rgba(99, 102, 241, .20);
  --accent2-10: rgba(236, 72, 153, .10);
  --accent3-10: rgba(139, 92, 246, .10);
  --accent4-10: rgba(6, 182, 212, .10);
  --good-10: rgba(5, 150, 105, .12);
  --bad-10: rgba(220, 38, 38, .12);
  --warn-10: rgba(217, 119, 6, .12);

  /* ─── Gradienti (Framer-style) ─── */
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-warm: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
  --grad-cool: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);

  /* ─── Tipografia (scala +1 rispetto a prima) ─── */
  --font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --text-2xs: 13px;            /* mai sotto 13 per leggibilità */
  --text-xs: 14px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-md: 20px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 44px;
  --text-4xl: 48px;            /* KPI hero numbers (Panoramica) */
  --text-5xl: 56px;            /* hero headline opzionale */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  /* ─── Spaziatura ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 100px;

  /* ─── Layout ─── */
  --max-width: 1120px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ─── Ombre (colored, Framer-style) ─── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .04);
  --shadow-accent: 0 8px 24px rgba(99, 102, 241, .22);
  --shadow-accent-sm: 0 2px 8px rgba(99, 102, 241, .18);
}