:root {
  /* Colors — palette Wise in Blue (design system Blue, primario #1a56db) */
  --color-primary: #1a56db;
  --color-primary-light: #3b82f6;
  --color-accent: var(--property-accent, #1a56db);
  /* Tema LIGHT: beige/avorio caldo (non bianco puro — coerente col branding Blue #ece4d4).
     Card più chiare dello sfondo per staccare; testo scuro invariato = ottimo contrasto. */
  --color-bg: #f0e9dc;        /* sfondo pagina: beige caldo */
  --color-surface: #faf6ee;   /* card/pannelli: avorio chiaro (stacca dal bg) */
  --color-surface-2: #f3ece0; /* input/superfici secondarie */
  --color-text: #2b2520;      /* marrone molto scuro (più caldo del nero su beige) */
  --color-text-muted: #6b6253;
  --color-text-light: #9c9384;
  --color-border: #e3d9c6;    /* bordo beige-grigio caldo */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-overlay: rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-elevated: 0 -2px 16px rgba(0, 0, 0, 0.09);
  --shadow-tabbar: 0 -1px 12px rgba(0, 0, 0, 0.1);

  /* Tab bar */
  --tabbar-height: 64px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --color-primary: #3b82f6;
  --color-primary-light: #60a5fa;
  --color-accent: var(--property-accent, #3b82f6);
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-2: #334155;
  --color-text: #f1f5f9;
  --color-text-muted: #cbd5e1;
  --color-text-light: #94a3b8;
  --color-border: #334155;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 -2px 16px rgba(0, 0, 0, 0.5);
  --shadow-tabbar: 0 -1px 12px rgba(0, 0, 0, 0.5);
}