/* Design tokens — the ONLY place where colours, spacing, radii, type scale and motion are defined.
   Palette «Blu cobalto su grigi» (chosen 11 Oct 2026): cool greys, one blue accent, semantic colours always
   paired with an icon in the UI (SPECIFICHE 8.4). Alternatives live in palettes.css (<html data-palette>). */

:root {
  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --lh-tight: 1.25;
  --lh: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

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

  /* Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;

  /* Layout */
  --sidebar-w: 232px;
  --panel-w: 420px;
  --topbar-h: 52px;
  --control-h: 36px;
  --row-h: 44px;            /* density: normal */
  --touch-target: 44px;

  /* Light theme (default) */
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #eff3f8;
  --surface-3: #e3e9f1;
  --border: #e3e8ef;
  --border-strong: #c9d2de;
  --text: #16202e;
  --text-2: #536074;
  --text-3: #8290a3;
  --text-inverse: #ffffff;

  --accent: #2563eb;
  --accent-hover: #1d4fd8;
  --accent-soft: #e5edfc;
  --accent-text: #1e4fc2;

  --ok: #15803d;
  --ok-soft: #e6f5ea;
  --ok-text: #166534;
  --warn: #b45309;
  --warn-soft: #fdf1e2;
  --warn-text: #92400e;
  --danger: #b91c1c;
  --danger-soft: #fbeaea;
  --danger-text: #991b1b;
  --neutral: #6b7280;
  --neutral-soft: #eceef1;
  --neutral-text: #4b5563;

  /* Pastel hues for projects, categories and avatars (soft background + readable foreground) */
  --c-blue-bg: #e2ecfb;   --c-blue-fg: #1e4fb8;
  --c-violet-bg: #ebe5fa; --c-violet-fg: #6334c5;
  --c-pink-bg: #fbe3ec;   --c-pink-fg: #b4256b;
  --c-orange-bg: #fde7d6; --c-orange-fg: #b9461a;
  --c-yellow-bg: #faefcb; --c-yellow-fg: #8f6200;
  --c-green-bg: #dcf2e4;  --c-green-fg: #1f7a43;
  --c-teal-bg: #d8f1ee;   --c-teal-fg: #0f6f68;
  --c-gray-bg: #ebeae5;   --c-gray-fg: #4f4d47;

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-sm: 0 1px 2px rgba(22, 32, 46, 0.06);
  --shadow-panel: 0 12px 32px rgba(22, 32, 46, 0.12), 0 2px 6px rgba(22, 32, 46, 0.06);
  --shadow-popover: 0 8px 24px rgba(22, 32, 46, 0.12), 0 1px 3px rgba(22, 32, 46, 0.08);
  --scrim: rgba(22, 32, 46, 0.36);
}

/* Dark theme: system preference, unless the user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15181e;
    --surface: #1c2028;
    --surface-2: #232834;
    --surface-3: #2c3340;
    --border: #2a303b;
    --border-strong: #3a4250;
    --text: #e8e9ec;
    --text-2: #a4a8b1;
    --text-3: #70747d;
    --text-inverse: #15161a;

    --accent: #5c8ef5;
    --accent-hover: #78a3f8;
    --accent-soft: rgba(92, 142, 245, 0.16);
    --accent-text: #a9c3fb;

    --ok: #4fc57e;
    --ok-soft: rgba(79, 197, 126, 0.14);
    --ok-text: #9ae3b6;
    --warn: #e5a53a;
    --warn-soft: rgba(229, 165, 58, 0.14);
    --warn-text: #f0c879;
    --danger: #ee6d67;
    --danger-soft: rgba(238, 109, 103, 0.14);
    --danger-text: #f5a7a3;
    --neutral: #8f939c;
    --neutral-soft: rgba(143, 147, 156, 0.14);
    --neutral-text: #c2c5cc;

    --c-blue-bg: rgba(110, 150, 240, 0.18);   --c-blue-fg: #b4c8ff;
    --c-violet-bg: rgba(160, 130, 240, 0.18); --c-violet-fg: #d2c4fd;
    --c-pink-bg: rgba(240, 120, 170, 0.18);   --c-pink-fg: #f7b8d2;
    --c-orange-bg: rgba(240, 150, 90, 0.18);  --c-orange-fg: #f9c4a2;
    --c-yellow-bg: rgba(230, 190, 70, 0.18);  --c-yellow-fg: #f1dc94;
    --c-green-bg: rgba(90, 200, 130, 0.18);   --c-green-fg: #a6e6bd;
    --c-teal-bg: rgba(70, 200, 185, 0.18);    --c-teal-fg: #9ae8dd;
    --c-gray-bg: rgba(170, 175, 185, 0.16);   --c-gray-fg: #cfd2d8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --scrim: rgba(0, 0, 0, 0.5);
  }
}

/* Dark theme forced by the user */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181e;
  --surface: #1c2028;
  --surface-2: #232834;
  --surface-3: #2c3340;
  --border: #2a303b;
  --border-strong: #3a4250;
  --text: #e8e9ec;
  --text-2: #a4a8b1;
  --text-3: #70747d;
  --text-inverse: #15161a;

  --accent: #5c8ef5;
  --accent-hover: #78a3f8;
  --accent-soft: rgba(92, 142, 245, 0.16);
  --accent-text: #a9c3fb;

  --ok: #4fc57e;
  --ok-soft: rgba(79, 197, 126, 0.14);
  --ok-text: #9ae3b6;
  --warn: #e5a53a;
  --warn-soft: rgba(229, 165, 58, 0.14);
  --warn-text: #f0c879;
  --danger: #ee6d67;
  --danger-soft: rgba(238, 109, 103, 0.14);
  --danger-text: #f5a7a3;
  --neutral: #8f939c;
  --neutral-soft: rgba(143, 147, 156, 0.14);
  --neutral-text: #c2c5cc;

  --c-blue-bg: rgba(110, 150, 240, 0.18);   --c-blue-fg: #b4c8ff;
  --c-violet-bg: rgba(160, 130, 240, 0.18); --c-violet-fg: #d2c4fd;
  --c-pink-bg: rgba(240, 120, 170, 0.18);   --c-pink-fg: #f7b8d2;
  --c-orange-bg: rgba(240, 150, 90, 0.18);  --c-orange-fg: #f9c4a2;
  --c-yellow-bg: rgba(230, 190, 70, 0.18);  --c-yellow-fg: #f1dc94;
  --c-green-bg: rgba(90, 200, 130, 0.18);   --c-green-fg: #a6e6bd;
  --c-teal-bg: rgba(70, 200, 185, 0.18);    --c-teal-fg: #9ae8dd;
  --c-gray-bg: rgba(170, 175, 185, 0.16);   --c-gray-fg: #cfd2d8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --scrim: rgba(0, 0, 0, 0.5);
}

/* Density (SPECIFICHE 8.1 §5): saved per user, applied on <html> */
:root[data-density="comfortable"] { --row-h: 52px; --control-h: 40px; }
:root[data-density="compact"] { --row-h: 36px; --control-h: 32px; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}