/*
 * TaskBook design tokens (CSS). Generated from frontend_app/static/js/design-tokens.js:
 * every palette key appears here as --tb-<kebab-name>. Change the JS module first;
 * tests/js/design-tokens.test.mjs fails if the two drift. Loaded by TaskBook and Fieldwork.
 */

:root,
body,
body.theme-light {
  --tb-font: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-nav-text-strong: #f1f5f8;
  --tb-nav-hover: rgb(255 255 255 / 0.06);
  --tb-nav-badge: rgb(255 255 255 / 0.1);
  --tb-nav-line: rgb(255 255 255 / 0.14);
  --tb-nav-line-strong: rgb(255 255 255 / 0.28);
  --tb-nav-edge: rgb(0 0 0 / 0.22);
  --tb-nav-indicator: #8cc3de;
  --tb-nav-indicator-hover: #b1d8ea;
  --tb-nav-success: #6fcf9a;
  --tb-nav-warning: #e8bd62;
  --tb-on-indicator: #0d2636;
  --tb-backdrop: rgb(9 20 31 / 0.5);
  --tb-shadow-tooltip: 0 4px 12px rgb(0 0 0 / 0.32);
  --tb-due-overdue: #c9372c;
  --tb-due-overdue-strong: #ae2e24;
  --tb-on-due-overdue: #ffffff;
  --tb-due-soon: #f5cd47;
  --tb-on-due-soon: #3d2e00;
  --tb-due-complete: #1f845a;
  --tb-on-due-complete: #ffffff;
  --tb-canvas: #f1f3f5;
  --tb-surface: #ffffff;
  --tb-surface-muted: #f6f7f9;
  --tb-surface-sunken: #e9edf1;
  --tb-border: #d8dee4;
  --tb-border-subtle: #e6eaee;
  --tb-border-strong: #7b8997;
  --tb-text: #1b2631;
  --tb-text-secondary: #55626f;
  --tb-text-placeholder: #687583;
  --tb-text-disabled: #5f6a76;
  --tb-accent: #255f83;
  --tb-accent-hover: #1a4a67;
  --tb-accent-soft: #e4eef4;
  --tb-accent-border: #a9c6d8;
  --tb-on-accent: #ffffff;
  --tb-focus: #3a86ad;
  --tb-focus-ring: rgb(58 134 173 / 0.35);
  --tb-nav-bg: #152838;
  --tb-nav-text: #cad5df;
  --tb-nav-muted: #9aaebe;
  --tb-nav-active: #223a4e;
  --tb-logo-bg: #ffffff;
  --tb-support: #315f57;
  --tb-support-hover: #214640;
  --tb-support-soft: #e8f2ef;
  --tb-success: #1d7447;
  --tb-success-hover: #155c37;
  --tb-success-soft: #e5f3eb;
  --tb-warning: #8a5700;
  --tb-warning-hover: #6d4500;
  --tb-warning-soft: #fcf0d6;
  --tb-danger: #b3261e;
  --tb-danger-hover: #8f1e18;
  --tb-danger-soft: #fbe8e6;
  --tb-on-danger: #ffffff;
  --tb-toast-bg: #1b2631;
  --tb-toast-text: #ffffff;
  --tb-toast-success: #6fcf9a;
  --tb-toast-error-bg: #b3261e;
  --tb-toast-error-text: #ffffff;
  --tb-toast-error-border: #b3261e;
  --tb-shadow-card: 0 1px 2px rgb(16 32 48 / 0.06), 0 1px 1px rgb(16 32 48 / 0.03);
  --tb-shadow-popover: 0 10px 28px -8px rgb(16 32 48 / 0.2), 0 2px 6px rgb(16 32 48 / 0.08);
  --tb-shadow-dialog: 0 28px 64px -16px rgb(8 20 32 / 0.38), 0 4px 12px rgb(8 20 32 / 0.1);
  --tb-shadow-button: 0 1px 2px rgb(16 32 48 / 0.12);
  --tb-shadow-pressed: inset 0 1px 2px rgb(0 0 0 / 0.16);

  /* Derived roles (not palette values). */
  --tb-border-control: color-mix(in srgb, var(--tb-border-strong) 62%, var(--tb-border));
  --tb-row-hover: color-mix(in srgb, var(--tb-accent) 5%, var(--tb-surface));
  --tb-row-selected: color-mix(in srgb, var(--tb-accent) 11%, var(--tb-surface));
  --tb-radius-control: 8px;
  --tb-radius-card: 12px;
  --tb-radius-dialog: 14px;
  --tb-radius-tooltip: 6px;
  --tb-button-height: 40px;
  --tb-button-height-small: 34px;
  --tb-touch-target: 44px;
  --tb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.theme-dark {
  --tb-nav-text-strong: #f1f5f8;
  --tb-nav-hover: rgb(255 255 255 / 0.06);
  --tb-nav-badge: rgb(255 255 255 / 0.1);
  --tb-nav-line: rgb(255 255 255 / 0.14);
  --tb-nav-line-strong: rgb(255 255 255 / 0.28);
  --tb-nav-edge: rgb(0 0 0 / 0.22);
  --tb-nav-indicator: #8cc3de;
  --tb-nav-indicator-hover: #b1d8ea;
  --tb-nav-success: #6fcf9a;
  --tb-nav-warning: #e8bd62;
  --tb-on-indicator: #0d2636;
  --tb-backdrop: rgb(9 20 31 / 0.5);
  --tb-shadow-tooltip: 0 4px 12px rgb(0 0 0 / 0.32);
  --tb-due-overdue: #c9372c;
  --tb-due-overdue-strong: #ae2e24;
  --tb-on-due-overdue: #ffffff;
  --tb-due-soon: #f5cd47;
  --tb-on-due-soon: #3d2e00;
  --tb-due-complete: #1f845a;
  --tb-on-due-complete: #ffffff;
  --tb-canvas: #0f161d;
  --tb-surface: #18212a;
  --tb-surface-muted: #1f2a34;
  --tb-surface-sunken: #131b23;
  --tb-border: #2f3c48;
  --tb-border-subtle: #26323d;
  --tb-border-strong: #6e7f8f;
  --tb-text: #e8edf2;
  --tb-text-secondary: #a9b6c3;
  --tb-text-placeholder: #8a98a6;
  --tb-text-disabled: #7f8c99;
  --tb-accent: #8cc3de;
  --tb-accent-hover: #b1d8ea;
  --tb-accent-soft: #1f3949;
  --tb-accent-border: #3f6a82;
  --tb-on-accent: #0d2636;
  --tb-focus: #8cc3de;
  --tb-focus-ring: rgb(140 195 222 / 0.4);
  --tb-nav-bg: #0b1620;
  --tb-nav-text: #cad5df;
  --tb-nav-muted: #91a5b6;
  --tb-nav-active: #172a3a;
  --tb-logo-bg: #f5f7f9;
  --tb-support: #8bc4b8;
  --tb-support-hover: #a9d8cf;
  --tb-support-soft: #213d3a;
  --tb-success: #6fcf9a;
  --tb-success-hover: #93deb5;
  --tb-success-soft: #17342a;
  --tb-warning: #e8bd62;
  --tb-warning-hover: #f7d88f;
  --tb-warning-soft: #3a2e14;
  --tb-danger: #f08b83;
  --tb-danger-hover: #f5b4b4;
  --tb-danger-soft: #3d1f22;
  --tb-on-danger: #0f161d;
  --tb-toast-bg: #e8edf2;
  --tb-toast-text: #0f161d;
  --tb-toast-success: #1d7447;
  --tb-toast-error-bg: #7c1f1a;
  --tb-toast-error-text: #fff5f4;
  --tb-toast-error-border: #b3423a;
  --tb-shadow-card: 0 1px 2px rgb(0 0 0 / 0.28);
  --tb-shadow-popover: 0 12px 30px -8px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);
  --tb-shadow-dialog: 0 30px 70px -16px rgb(0 0 0 / 0.7), 0 4px 14px rgb(0 0 0 / 0.35);
  --tb-shadow-button: 0 1px 2px rgb(0 0 0 / 0.3);
  --tb-shadow-pressed: inset 0 1px 2px rgb(0 0 0 / 0.3);

  --tb-row-hover: color-mix(in srgb, var(--tb-accent) 6%, var(--tb-surface));
  --tb-row-selected: color-mix(in srgb, var(--tb-accent) 14%, var(--tb-surface));
  color-scheme: dark;
}