/* file generato da tools/tokengen: non modificare. Fonte: ui/tokens.json (docs/WALKIE_DESK_UI.md §2).
   Rigenerare con: tokengen --root <repo>. */

:root {
  color-scheme: light dark;

  /* raggi */
  --wd-radius-xs: 6px;
  --wd-radius-sm: 8px;
  --wd-radius-md: 12px;
  --wd-radius-lg: 16px;
  --wd-radius-xl: 22px;
  --wd-radius-full: 999px;

  /* testo */
  --wd-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --wd-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --wd-font-size-xs: 12px;
  --wd-font-size-sm: 14px;
  --wd-font-size-md: 16px;
  --wd-font-size-lg: 17px;
  --wd-font-size-xl: 20px;
  --wd-font-size-2xl: 24px;
  --wd-font-size-3xl: 30px;
  --wd-font-weight-regular: 400;
  --wd-font-weight-medium: 500;
  --wd-font-weight-semibold: 600;
  --wd-font-weight-bold: 700;
  --wd-line-height-body: 1.5;
  --wd-line-height-heading: 1.25;

  /* spaziatura e dimensioni */
  --wd-space-1: 4px;
  --wd-space-2: 8px;
  --wd-space-3: 12px;
  --wd-space-4: 16px;
  --wd-space-5: 20px;
  --wd-space-6: 24px;
  --wd-space-7: 28px;
  --wd-space-8: 32px;
  --wd-space-9: 36px;
  --wd-space-10: 40px;
  --wd-space-11: 44px;
  --wd-space-12: 48px;
  --wd-page-max-width: 72rem;
  --wd-control-height: 44px;
  --wd-control-height-lg: 48px;
  --wd-chip-height: 36px;
  --wd-dot: 8px;
  --wd-dot-lg: 10px;

  /* avatar (uguali nei due temi, testo #fff) */
  --wd-avatar-1: #4338ca;
  --wd-avatar-2: #1d4ed8;
  --wd-avatar-3: #0f766e;
  --wd-avatar-4: #15803d;
  --wd-avatar-5: #b45309;
  --wd-avatar-6: #be123c;
  --wd-avatar-7: #7e22ce;
  --wd-avatar-8: #475569;

  /* tema chiaro (predefinito) */
  --wd-bg: #f3f4f9;
  --wd-surface: #ffffff;
  --wd-surface-2: #eceef6;
  --wd-surface-3: #e0e3ef;
  --wd-border: #dfe2ec;
  --wd-text: #161a2e;
  --wd-text-muted: #525a73;
  --wd-text-subtle: #5f6680;
  --wd-primary: #4338ca;
  --wd-on-primary: #ffffff;
  --wd-primary-text: #4338ca;
  --wd-primary-soft: #e7e8fd;
  --wd-on-primary-soft: #2e2a85;
  --wd-info-soft: #e4eefd;
  --wd-on-info-soft: #1e3a8a;
  --wd-danger: #b91c1c;
  --wd-on-danger: #ffffff;
  --wd-dot-online: #148f3e;
  --wd-dot-busy: #c27803;
  --wd-dot-off: #7b8199;
  --wd-dot-relay: #2563eb;
  --wd-dot-danger: #dc2626;
  --wd-success: #157a3a;
  --wd-success-soft: #ddf6e5;
  --wd-on-success-soft: #14532d;
  --wd-warn: #9a4a00;
  --wd-warn-soft: #fff1d1;
  --wd-on-warn-soft: #6b3200;
  --wd-avatar: #4338ca;
  --wd-focus: #4f46e5;
  --wd-video-bg: #000000;
  --wd-focus-ring: 0 0 0 3px #4f46e566;
  --wd-shadow-md: 0 4px 12px #10182814, 0 2px 4px #1018280f;
  --wd-shadow-lg: 0 16px 40px #1018282e, 0 4px 12px #10182814;
}

/* tema scuro dal sistema, salvo override manuale data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wd-bg: #0e1120;
    --wd-surface: #171a2c;
    --wd-surface-2: #21253b;
    --wd-surface-3: #2b3049;
    --wd-border: #2a2f48;
    --wd-text: #e9ebf6;
    --wd-text-muted: #a8aec7;
    --wd-text-subtle: #9aa1bc;
    --wd-primary: #4f46e5;
    --wd-on-primary: #ffffff;
    --wd-primary-text: #a9b4ff;
    --wd-primary-soft: #262a52;
    --wd-on-primary-soft: #d4d9ff;
    --wd-info-soft: #172a4d;
    --wd-on-info-soft: #c4dafe;
    --wd-danger: #ff8a80;
    --wd-on-danger: #1a0b0b;
    --wd-dot-online: #3fcf71;
    --wd-dot-busy: #e8a33c;
    --wd-dot-off: #7a819e;
    --wd-dot-relay: #6ea8ff;
    --wd-dot-danger: #ff6b61;
    --wd-success: #5bd685;
    --wd-success-soft: #12301f;
    --wd-on-success-soft: #b4f0c8;
    --wd-warn: #f2b65a;
    --wd-warn-soft: #33250b;
    --wd-on-warn-soft: #fbd99c;
    --wd-avatar: #4338ca;
    --wd-focus: #a9b4ff;
    --wd-video-bg: #000000;
    --wd-focus-ring: 0 0 0 3px #a9b4ff66;
    --wd-shadow-md: 0 4px 12px #00000073;
    --wd-shadow-lg: 0 16px 40px #0009;
  }
}

/* override manuale del tema (preferenza utente, U3) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --wd-bg: #0e1120;
  --wd-surface: #171a2c;
  --wd-surface-2: #21253b;
  --wd-surface-3: #2b3049;
  --wd-border: #2a2f48;
  --wd-text: #e9ebf6;
  --wd-text-muted: #a8aec7;
  --wd-text-subtle: #9aa1bc;
  --wd-primary: #4f46e5;
  --wd-on-primary: #ffffff;
  --wd-primary-text: #a9b4ff;
  --wd-primary-soft: #262a52;
  --wd-on-primary-soft: #d4d9ff;
  --wd-info-soft: #172a4d;
  --wd-on-info-soft: #c4dafe;
  --wd-danger: #ff8a80;
  --wd-on-danger: #1a0b0b;
  --wd-dot-online: #3fcf71;
  --wd-dot-busy: #e8a33c;
  --wd-dot-off: #7a819e;
  --wd-dot-relay: #6ea8ff;
  --wd-dot-danger: #ff6b61;
  --wd-success: #5bd685;
  --wd-success-soft: #12301f;
  --wd-on-success-soft: #b4f0c8;
  --wd-warn: #f2b65a;
  --wd-warn-soft: #33250b;
  --wd-on-warn-soft: #fbd99c;
  --wd-avatar: #4338ca;
  --wd-focus: #a9b4ff;
  --wd-video-bg: #000000;
  --wd-focus-ring: 0 0 0 3px #a9b4ff66;
  --wd-shadow-md: 0 4px 12px #00000073;
  --wd-shadow-lg: 0 16px 40px #0009;
}

:root[data-theme="light"] {
  color-scheme: light;
  --wd-bg: #f3f4f9;
  --wd-surface: #ffffff;
  --wd-surface-2: #eceef6;
  --wd-surface-3: #e0e3ef;
  --wd-border: #dfe2ec;
  --wd-text: #161a2e;
  --wd-text-muted: #525a73;
  --wd-text-subtle: #5f6680;
  --wd-primary: #4338ca;
  --wd-on-primary: #ffffff;
  --wd-primary-text: #4338ca;
  --wd-primary-soft: #e7e8fd;
  --wd-on-primary-soft: #2e2a85;
  --wd-info-soft: #e4eefd;
  --wd-on-info-soft: #1e3a8a;
  --wd-danger: #b91c1c;
  --wd-on-danger: #ffffff;
  --wd-dot-online: #148f3e;
  --wd-dot-busy: #c27803;
  --wd-dot-off: #7b8199;
  --wd-dot-relay: #2563eb;
  --wd-dot-danger: #dc2626;
  --wd-success: #157a3a;
  --wd-success-soft: #ddf6e5;
  --wd-on-success-soft: #14532d;
  --wd-warn: #9a4a00;
  --wd-warn-soft: #fff1d1;
  --wd-on-warn-soft: #6b3200;
  --wd-avatar: #4338ca;
  --wd-focus: #4f46e5;
  --wd-video-bg: #000000;
  --wd-focus-ring: 0 0 0 3px #4f46e566;
  --wd-shadow-md: 0 4px 12px #10182814, 0 2px 4px #1018280f;
  --wd-shadow-lg: 0 16px 40px #1018282e, 0 4px 12px #10182814;
}