:root {
  color-scheme: light;

  /* colour: neutrals */
  --canvas: #F4F6F5;
  --surface: #FFFFFF;
  --surface-sunken: #EEF1F0;
  --surface-hover: #F2F5F4;
  --surface-raised: #FFFFFF;
  --border: #DCE2E0;
  --border-strong: #BFC8C5;
  --border-control: #75837F;
  --text: #18211F;
  --text-secondary: #55625F;
  --text-muted: #5F6C68;
  --text-disabled: #8D9996;
  /* colour: brand (the four swappable tokens) */
  --brand: #0F585E;
  --brand-hover: #0B464A;
  --brand-subtle: #E3F0F0;
  --brand-contrast: #FFFFFF;
  --focus-ring: var(--brand);
  /* colour: status */
  --good: #1B7242;
  --good-subtle: #E4F3EA;
  --warning: #8F5206;
  --warning-subtle: #FBF0DC;
  --critical: #B3261E;
  --critical-subtle: #FCE9E7;
  --critical-hover: #8F1D17;
  --critical-contrast: #FFFFFF;
  --info: #2B5FB4;
  --info-subtle: #E6EEFB;
  --inverse-bg: #18211F;
  --inverse-text: #FFFFFF;
  --scrim: rgba(15, 20, 19, .40);
  /* colour: chart series */
  --series-1: #1F7A6E;
  --series-2: #4C5BD4;
  --series-3: #A8730F;
  --series-4: #8E4FA0;
  --series-5: #5B6B7A;
  --series-6: #C95A3E;
  /* elevation */
  --shadow-overlay: 0 12px 32px rgba(15, 20, 19, .16);

  /* type */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --type-page: 600 24px/32px var(--font-sans);
  --type-section: 600 17px/24px var(--font-sans);
  --type-sub: 600 15px/22px var(--font-sans);
  --type-body: 400 14px/20px var(--font-sans);
  --type-button: 500 14px/20px var(--font-sans);
  --type-table: 400 13px/18px var(--font-sans);
  --type-label: 500 12px/16px var(--font-sans);
  --type-caption: 400 12px/16px var(--font-sans);
  --type-figure: 600 28px/34px var(--font-sans);
  --type-card: 500 18px/24px var(--font-sans);
  --type-mono: 400 12px/18px var(--font-mono);
  --lh-arabic: 1.6;
  --lh-arabic-page: 1.5;

  /* space */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;

  /* radius */
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-region: 10px;
  --radius-overlay: 14px;
  --radius-bar: 2px;
  --radius-round: 999px;

  /* borders */
  --border-width: 1px;
  --border-width-rail: 1.5px;
  --border-width-thick: 2px;
  --border-width-accent: 3px;

  /* icons */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.5;
  --icon-stroke-chip: 2;

  /* component sizes */
  --size-control: 36px;
  --size-control-sm: 32px;
  --size-control-touch: 44px;
  --size-target-min: 24px;
  --size-chip: 20px;
  --size-chip-control: 24px;
  --size-filter-chip: 32px;
  --size-checkbox: 16px;
  --size-switch-w: 32px;
  --size-switch-h: 18px;
  --size-switch-thumb: 14px;
  --size-bar: 6px;
  --size-bar-w: 72px;
  --size-node: 14px;
  --size-marker: 24px;
  --size-dot: 8px;
  --size-badge: 16px;
  --size-avatar-sm: 24px;
  --size-avatar-md: 32px;
  --size-avatar-lg: 48px;
  --size-row-compact: 36px;
  --size-row-comfortable: 44px;
  --size-row: var(--size-row-compact);
  --size-header-row: 36px;
  --size-toolbar: 48px;
  --size-tab: 44px;
  --size-menu-item: 32px;
  --size-result-row: 40px;
  --size-calendar-cell: 40px;

  /* shell and layout */
  --size-topbar: 56px;
  --size-rail: 232px;
  --size-rail-collapsed: 64px;
  --size-context-rail: 320px;
  --size-stepper: 200px;
  --size-content-max: 1440px;
  --size-overview-max: 1600px;
  --size-list-max: 1920px;
  --size-form-max: 640px;
  --size-field-max: 480px;
  --size-field-mid: 280px;
  --size-field-short: 200px;
  --size-prose: 72ch;
  --size-viewport-gutter: 16px;

  /* overlays */
  --size-popover-sm: 240px;
  --size-popover-md: 360px;
  --size-popover-lg: 480px;
  --size-drawer: 480px;
  --size-dialog-sm: 440px;
  --size-dialog-md: 560px;
  --size-dialog-lg: 720px;
  --size-command: 640px;
  --size-toast: 400px;
  --size-tooltip-max: 280px;
  --size-signin: 400px;

  /* card face and charts */
  --size-card-w: 320px;
  --size-card-w-sm: 240px;
  --ratio-card: 85.6 / 54;
  --size-chart-h: 240px;
  --size-chart-h-sm: 160px;
  --size-spark-w: 96px;
  --size-spark-h: 24px;
  --chart-margin-top: 16px;
  --chart-margin-end: 16px;
  --chart-margin-bottom: 32px;
  --chart-margin-start: 56px;

  /* table columns */
  --col-select: 48px;
  --col-icon: 40px;
  --col-actions: 48px;
  --col-id: 96px;
  --col-status: 112px;
  --col-date: 144px;
  --col-money: 144px;
  --col-meter: 160px;
  --col-chips: 140px;
  --col-text: 128px;
  --col-name: 160px;
  --col-wide: 280px;

  /* layout lengths and offsets (theme independent) */
  --size-header-slim: 28px;
  --size-header: 56px;
  --size-footer: 64px;
  --size-dropzone-min: 160px;
  --size-presets: 160px;
  --size-fact-min: 160px;
  --size-listbox-max-h: 320px;
  --size-results-max-h: 400px;
  --size-tray-max-h: 640px;
  --size-stepper-h: 72px;
  --size-logo: 24px;
  --size-logo-lg: 32px;
  --offset-command: 12dvh;
  --offset-signin: 20dvh;
  --size-rise: 8px;
  --size-skeleton-line: 12px;
  --size-skeleton-chip-w: 56px;
  --size-skeleton-label-w: 96px;
  --size-skeleton-value-w: 128px;
  --size-skeleton-value-h: 28px;
  --size-skeleton-title-w: 160px;
  --size-skeleton-title-h: 16px;
  --size-skeleton-trace-a-w: 120px;
  --size-skeleton-trace-b-w: 200px;

  /* layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-shell: 20;
  --z-scrim-drawer: 50;
  --z-drawer: 55;
  --z-scrim-dialog: 60;
  --z-dialog: 65;
  --z-popover: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-trace: 300ms;
  --duration-flash: 1200ms;
  --duration-pulse: 1600ms;
  --duration-tooltip: 400ms;
  --duration-toast: 6000ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

:root[data-density="comfortable"] {
  --size-row: var(--size-row-comfortable);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0F1413;
  --surface: #161C1B;
  --surface-sunken: #1C2322;
  --surface-hover: #202928;
  --surface-raised: #1E2625;
  --border: #2A3332;
  --border-strong: #3A4544;
  --border-control: #6B7A77;
  --text: #E6ECEA;
  --text-secondary: #A2AEAB;
  --text-muted: #8A9693;
  --text-disabled: #5F6B68;
  --brand: #4FB0B3;
  --brand-hover: #6CC4C6;
  --brand-subtle: #132F30;
  --brand-contrast: #081F20;
  --good: #4CC285;
  --good-subtle: #12301F;
  --warning: #E6A23C;
  --warning-subtle: #33260F;
  --critical: #F0726A;
  --critical-subtle: #3A1715;
  --critical-hover: #F58C85;
  --critical-contrast: #2A0A08;
  --info: #7FA8F0;
  --info-subtle: #172540;
  --inverse-bg: #E6ECEA;
  --inverse-text: #0F1413;
  --scrim: rgba(0, 0, 0, .60);
  --series-1: #3FA595;
  --series-2: #7C88F0;
  --series-3: #E0A53C;
  --series-4: #C07FD2;
  --series-5: #8FA0B0;
  --series-6: #E8826A;
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0F1413;
    --surface: #161C1B;
    --surface-sunken: #1C2322;
    --surface-hover: #202928;
    --surface-raised: #1E2625;
    --border: #2A3332;
    --border-strong: #3A4544;
    --border-control: #6B7A77;
    --text: #E6ECEA;
    --text-secondary: #A2AEAB;
    --text-muted: #8A9693;
    --text-disabled: #5F6B68;
    --brand: #4FB0B3;
    --brand-hover: #6CC4C6;
    --brand-subtle: #132F30;
    --brand-contrast: #081F20;
    --good: #4CC285;
    --good-subtle: #12301F;
    --warning: #E6A23C;
    --warning-subtle: #33260F;
    --critical: #F0726A;
    --critical-subtle: #3A1715;
    --critical-hover: #F58C85;
    --critical-contrast: #2A0A08;
    --info: #7FA8F0;
    --info-subtle: #172540;
    --inverse-bg: #E6ECEA;
    --inverse-text: #0F1413;
    --scrim: rgba(0, 0, 0, .60);
    --series-1: #3FA595;
    --series-2: #7C88F0;
    --series-3: #E0A53C;
    --series-4: #C07FD2;
    --series-5: #8FA0B0;
    --series-6: #E8826A;
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, .5);
  }
}