/* Design contract v1.1. See docs/design-system.md. Change semantic values here, not in components. */
:root {
  color-scheme: light;
  --font-family: Arial, sans-serif;
  --font-xs: 11px;
  --font-label: 12px;
  --font-table: 12px;
  --font-body: 13px;
  --font-control: 14px;
  --font-heading: 22px;
  --weight-normal: 400;
  --weight-bold: 700;
  --leading-body: 1.4;
  --leading-table: 1.2;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 6px;
  --radius-panel: 10px;
  --control-height: 40px;
  --icon-size: 20px;
  --neutral-50: #f8f9fa;
  --neutral-100: #f1f3f4;
  --neutral-200: #e8eaed;
  --neutral-300: #dadce0;
  --neutral-400: #bdc1c6;
  --neutral-500: #9aa0a6;
  --neutral-600: #80868b;
  --neutral-700: #5f6368;
  --neutral-900: #202124;
  --color-page: var(--neutral-50);
  --color-surface: #ffffff;
  --color-hover: var(--neutral-100);
  --color-text: #212933;
  --color-heading: var(--neutral-900);
  --color-secondary: var(--neutral-700);
  --color-muted: var(--neutral-600);
  --color-placeholder: var(--neutral-600);
  --color-border: var(--neutral-300);
  --color-control-border: var(--neutral-400);
  --color-border-strong: var(--neutral-400);
  --color-action: #375a9a;
  --color-action-hover: #2e4d85;
  --color-action-soft: #f1f5fb;
  --color-action-soft-hover: #e8eef8;
  --color-action-border: #c4d1e5;
  --color-selected: #edf2fb;
  --color-editor-bg: #f5f7fc;
  --color-editor-heading: #2d4b80;
  --color-editor-text: #26364c;
  --color-editor-secondary: #53647c;
  --color-editor-border: #aebfdb;
  --color-editor-divider: #d5deec;
  --color-info-bg: var(--neutral-50);
  --color-info-border: var(--neutral-300);
  --color-cell-hover-border: #a6a6a6;
  --color-cell-selected-border: #1a73e8;
  --color-cell-selected-tint: rgb(26 115 232 / 12%);
  --color-cell-action-bg: rgb(255 255 255 / 88%);
  --color-day-gap: var(--neutral-50);
  --color-day-divider: var(--neutral-400);
  --day-gap: 6px;
  --color-success: #256745;
  --color-success-bg: #edf6f0;
  --color-success-border: #c2dfcb;
  --color-danger: #c0363d;
  --color-danger-hover: #a52930;
  --color-danger-bg: #fff1f2;
  --color-danger-border: #e9b9bd;
  /* Schedule fills deliberately match the established spreadsheet. */
  --slot-today: #ffe599;
  --slot-future: #f4c7c3;
  --slot-off: var(--neutral-100);
  --slot-off-text: var(--neutral-700);
  --slot-elapsed-text: var(--neutral-400);
  --slot-history-text: var(--neutral-500);
  --grid-time-header: #d9ead3;
  --grid-date-header: #b7e1cd;
  --grid-past-date-header: var(--neutral-100);
  --color-past-date: var(--neutral-600);
  --color-past-date-selected: var(--neutral-200);
  /* Load rings use stronger colours than the table backgrounds. */
  --load-track: var(--neutral-200);
  --load-past: var(--neutral-400);
  --load-low: #27985f;
  --load-medium: #e5a117;
  --load-high: #db4945;
  --color-weekend: #b34a49;
  --color-backdrop: #20212455;
  --shadow-notice: 0 4px 20px #20212414;
  --motion-fast: 120ms;
  --date-width: 38px;
  --master-width: 110px;
  --hour-width: 150px;
  --editor-width: 370px;
  --editor-fade: 18px;
  --editor-edge: linear-gradient(90deg,rgb(32 33 36 / 0%) 0%,rgb(32 33 36 / 1%) 35%,rgb(32 33 36 / 4%) 72%,rgb(32 33 36 / 9%) 100%);
  --shadow-editor: -2px 0 8px rgb(32 33 36 / 3%);
  --line: var(--color-border);
}