/* Design tokens: unico punto in cui definire colori, tipografia e misure. */
:root {
  color-scheme: light;
  --bg: #f3f5fa;
  --bg-soft: #e9edf6;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --line: #dfe4ef;
  --line-strong: #c9d1e2;
  --ink: #141b2d;
  --ink-2: #45506a;
  --ink-3: #6b7590;
  --primary: #1747b8;
  --primary-ink: #ffffff;
  --primary-soft: #e4ebfb;
  --primary-hover: #11388f;
  --accent: #8f6408;
  --accent-soft: #fbf0d2;
  --danger: #b4392b;
  --danger-soft: #f8e4e0;
  --ok: #2f7a4b;
  --ok-soft: #e1f1e6;
  --warn: #855b06;
  --warn-soft: #fbf0d6;
  --focus: #2f6fe0;
  --scrim: rgb(12 18 36 / 0.45);
  --shadow-1: 0 1px 2px rgb(20 30 60 / 0.07), 0 1px 1px rgb(20 30 60 / 0.04);
  --shadow-2: 0 10px 30px -12px rgb(20 30 70 / 0.25), 0 2px 6px rgb(20 30 60 / 0.06);

  --p-ocean: #2f6fb0;
  --p-leaf: #3d8a57;
  --p-sun: #c9930f;
  --p-coral: #d4614a;
  --p-plum: #8558b3;
  --p-sky: #2697b8;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 1.9rem;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --space: 16px;
  --tap: 44px;
  --sidebar-w: 264px;
  --bottom-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1122;
    --bg-soft: #070d1b;
    --surface: #111a30;
    --surface-2: #16213b;
    --line: #233150;
    --line-strong: #304166;
    --ink: #e9eefb;
    --ink-2: #b3bdd6;
    --ink-3: #8792b0;
    --primary: #7ea6ff;
    --primary-ink: #0a1430;
    --primary-soft: #1b2b52;
    --primary-hover: #9cbbff;
    --accent: #f2bd45;
    --accent-soft: #3a2f14;
    --danger: #ef8b7c;
    --danger-soft: #3d2420;
    --ok: #7cc995;
    --ok-soft: #1c3426;
    --warn: #e7c06a;
    --warn-soft: #362d17;
    --focus: #8fb4ff;
    --scrim: rgb(0 0 0 / 0.55);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 14px 34px -14px rgb(0 0 0 / 0.65);
    --p-ocean: #6aa5e0;
    --p-leaf: #6fbf89;
    --p-sun: #e3b53e;
    --p-coral: #ee8a74;
    --p-plum: #b18ddb;
    --p-sky: #5dc0dd;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1122;
  --bg-soft: #070d1b;
  --surface: #111a30;
  --surface-2: #16213b;
  --line: #233150;
  --line-strong: #304166;
  --ink: #e9eefb;
  --ink-2: #b3bdd6;
  --ink-3: #8792b0;
  --primary: #7ea6ff;
  --primary-ink: #0a1430;
  --primary-soft: #1b2b52;
  --primary-hover: #9cbbff;
  --accent: #f2bd45;
  --accent-soft: #3a2f14;
  --danger: #ef8b7c;
  --danger-soft: #3d2420;
  --ok: #7cc995;
  --ok-soft: #1c3426;
  --warn: #e7c06a;
  --warn-soft: #362d17;
  --focus: #8fb4ff;
  --scrim: rgb(0 0 0 / 0.55);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 14px 34px -14px rgb(0 0 0 / 0.65);
  --p-ocean: #6aa5e0;
  --p-leaf: #6fbf89;
  --p-sun: #e3b53e;
  --p-coral: #ee8a74;
  --p-plum: #b18ddb;
  --p-sky: #5dc0dd;
}